Cut & Paste Falling Text Rotator
|
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:
|
| 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:
|
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.