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>
	

@michaeldfaber on Github