jquery波浪文字动画特效插件

retro animation for headers and text

Usage

Create a div with text:

<div id='textbanner'>Hello World!</div>
<h1 id='textbanner'>Hello World!</h1>
<p id='textbanner'>Hello World!</p>

Use jQuery to select element and call textbanner()

<script>
	$('#textbanner').textbanner();
</script>

---

Parameters

Name	Datatype	Default	Description
cycles	int	infinity	Your text or header can move perpetually or go through every letter n times. This is good for associating the animation with buttons or events, or for a quick animation on page load.

Click me for two cycles of animation

<p id="demo">Click me for two cycles of animation</p>

<script>
	$('#demo').click(function() {
		$('#demo').textbanner({
			cycles: 2
		});
	});
</script>

Code for a button setup like the header:

<p id="demo">textbanner.js</p>
<div id="btn" class="btn btn-primary">Demo</div>

<script>
	$('#btn').click(function() {
		$('#demo').textbanner({
			cycles: 1
		});
	});
</script>

Perpetual Animation

<p id="demo">textbanner.js</p>

<script>
	$('#demo').textbanner();
</script>

Name	Datatype	Default	Description
growth	percentage	120%	The peak size in the oscilliation of each letter, as a percentage of its original size, which is inherited from the original element as well things like color and font.

Click me for large growth

Click me for small growth

<p id="demo">Click me for large growth</p>
<p id="demo">Click me for small growth</p>

<script>
	$('#demo').click(function() {
		$('#demo').textbanner({
			//large growth
			growth: 150
			//small growth
			growth: 110
		});
	});
</script>

Name	Datatype	Default	Description
speed	milliseconds	100	The speed at which the character animations individually occur. Accepts "slow", "intermediate", "fast", as well as numerical values for custom speeds.

Slow Animation Speed

Intermediate Animation Speed (Default)

Fast Animation Speed

Custom Animation Speed

<script>
	$('#slowdemo').textbanner({
		speed: "slow"
	});
	$('#middemo').textbanner({
		speed: "intermediate"
	});
	$('#fastdemo').textbanner({
		speed: "fast"
	});
	$('#customdemo').textbanner({
		speed: 136.7
	});
</script>

---