Categories:

Home / Free JavaScripts / Text Effects / Here

Cut & Paste Falling Text Rotator

Credit: JavaScript Kit

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.

Examples (CSS3 capable browser required to see animation):

  • JavaScript Kit
  • Bigger, Bolder
  • And Badder
  • Than even Rambo!

Directions:

Step 1: Add the following code to the <HEAD> section of your page:

Download the following three external files and upload to same directory as where your webpage resides:

Step 2: Add the below sample HTML markup to your <BODY>:

More Information

To rotate the contents of a UL element using Falling Text Rotator, call the jQuery function fallingtextrotator() on it:

$('#headline').fallingtextrotator({
 pause: 3000,
 cycles: 2,
 ontextchange:function(msgindex, msg, eachchar){
  //console.log(msgindex, msg, eachchar)
 }
})

where "#headline" should be replaced with a valid jQuery selector that references the desired UL, and a list of options separated each by a comma passed into the function.

The markup for your UL element should simply be a regular UL with textual contents:

<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>

Note the required CSS class fallingtextrotator to style it propertly.

Now, back to the function fallingtextrotator(). Lets look at the options the function supports. Each one if specified and more than one are defined should be separated by a comma:

option Description
pause

defaults to 2000

The pause between message changes. This is different from the duration of the animation effects, which there are two:
  1. The fade animation on each piece of content as they are revealed. This is specified in fallingtextrotator.css, inside the ul.fallingtextrotator > li selector.
  2.  The text falling on each character animation, which is specified in the ul.fallingtextrotator > li.dropdown span[class*="char"] selector inside fallingtextrotator.css,
cycles

defaults to 1

The number of cycles the script rotates through the LI contents before stopping. A value of 0 means perpetually, while a value of 1 (default) means it will stop at the last message.
ontextchange(msgindex, msg, $eachchar){}

defaults to empty function

An event handler that fires at the end of each message change, after all of a message's characters have dropped out of view. It is implicitly passed the following 3 parameters to help you manipulate said message:
  1. msgindex: The index of the message that just disappeared relative to its peers, where 0=1st message, 1=2nd etc.
  2. msg: The contents of that message in its entirety.
  3. $eachchar: A jQuery collection containing each character of the message as a separate object. This allows you to manipulate the contents of the message on a per-character basis. For example, $eachchar.eq(0) would return a jQuery object containing the very first character of the message.

Customizing the look of your text

Modifying the look and speed of the animations is done entirely inside fallingtextrotator.css. By default the font used is "Orbitron", from Google fonts. CSS3 text shadows are used to give it a 3D look, with the even messages given a different shadow color for flare (see the ul.fallingtextrotator > li:nth-of-type(even) selector). 

There are two CSS3 animations defined on each text. The first one occurs on the LI level, and is responsible for the fade in effect you see on each message when it is revealed:

ul.fallingtextrotator > li{
 position: absolute;
 opacity: 0;
 top: 0;
 left: 0;
 -moz-transition: all 0.3s ease-in;/
 -webkit-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
 -ms-transition: all 0.3s ease-in;
 transition: all 0.3s ease-in;
}

The opacity property being initially set to 0 (then 1 by the script later on) is what causes the text to fade into view. Change 0.3s to the desired animation duration.

The 2nd animation is defined on the individual character level, which are each wrapped in its own <span class="charx"> tag, with x being an integer starting with 1:

ul.fallingtextrotator > li.dropdown span[class*="char"]{
 opacity: 0;
 -moz-transform: translateY(300px) rotateZ(120deg); /* drop down and rotate */
 -webkit-transform: translateY(300px) rotateZ(120deg);
 transform: translateY(300px) rotateZ(120deg);
 -moz-transition: all 0.3s ease-in;
 -webkit-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
 -ms-transition: all 0.3s ease-in;
 transition: all 0.3s ease-in;
}

Once again, you can change 0.3s to reflect the desired duration of the falling text animation.


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.