Description: This jQuery script adds a twist to the regular text rotator, by randomly dropping the letters of each piece of content out of view before showing the next. It works great on short headlines, with each content wrapped simply in a LI element on the page.
Falling Text Rotator uses the helpful plugin Lettering.js to manipulate text on a character basis, and CSS3 to provide the animation. It works great in all modern versions of FF, Chrome, IE10+ etc, while in IE8/9, it reverts back to a basic rotator with no animation effect.
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
<link rel="stylesheet" type="text/css" href="fallingtextrotator.css" />
<link href='http://fonts.googleapis.com/css?family=Orbitron:400,700,900' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.lettering-0.6.1.min.js"></script>
<script src="fallingtextrotator.js">
/* =====================================
Falling Text Rotator- by JavaScript Kit (www.javascriptkit.com)
Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
===================================== */
</script>
<script>
jQuery(function(){ // on DOM load
$('#headline').fallingtextrotator({
pause: 3000,
cycles: 2,
ontextchange:function(msgindex, msg, eachchar){
//console.log(msgindex, msg, eachchar)
}
})
})
</script>
Download the following three external files and upload to same directory as where your webpage resides:
http://www.javascriptkit.com/script/script2/fallingtextrotator.js
http://www.javascriptkit.com/script/script2/fallingtextrotator.css
http://www.javascriptkit.com/script/script2/jquery.lettering-0.6.1.min.js
Step 2: Add the below sample HTML markup to your <BODY>:
<ul id="headline" class="fallingtextrotator" style="height:2em">
<li>JavaScript Kit</li>
<li>Bigger, Bolder</li>
<li>And Badder</li>
<li>Than even Rambo!</li>
</ul>
