Rotating text is a very simple idea where you can add more content to a text area without consuming much space by rotating an individual word with a collection of others. Although the concept is very simple, most implementation I stumble upon always require you do complicated markup changes that I believe are unnecessary.
Recently I decided to build my own jQuery plugin called “Simple Text Rotator” that will allow you to add rotating text to your website with minimal markup changes. Check out our demo below:
[tut demo=”https://onextrapixel.com/examples/jquery-super-simple-text-rotator/” download=”https://onextrapixel.com/examples/jquery-super-simple-text-rotator/jquery-super-simple-text-rotator.zip”]
Simple Text Rotator
Basic Usage
Simple Text Rotator is extremely lightweight and simple to use. All you need is to include jQuery library, jquery.simple-text-rotator.js
and simpletextrotator.css to your HTML documents and simply wrap the text you want to rotate with span class=”rotate”
and that is it. Make sure the words inside this span
are separated by commas. You can see an example below:
HTML Markup
Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style
Pretty simple right? I decided to use a comma as a separator because it is natural and all the hard work of adding other markups should be done automatically by the script. For the js
part, there are a few options you can play around with.
JS
$(".rotate").textrotator({ animation: "spin", separator: ",", speed: 2000 });
For the animation, you can pick between dissolve
, flip
, flipUp
, flipCube
, flipCubeUP
, fade
and spin
. If you don’t define anything, the animation will be defaulted to “dissolve”
. These animations are a combination of CSS transform and jQuery animations. While developing this plugin, I’ve learned that some animations are better in CSS3 than using jQuery because with CSS3, you don’t have to always run a calculation to find the exact position where the text must move to.
Animations such as all the flips and spins are animated using CSS3. For fade, I used the fadeIn
, fadeOut
effect that came with jQuery. For the dissolve animation, I used box-shadow style and increases it over time to create a dissolve-like effect when the text expands and fades into the background.
For the separator, I realized that there will be times when a comma separator isn’t viable (when you have a comma in a word you want to cycle through) so I decided to let the user decide which separator they will use. If nothing is set, comma will be used as the default separator.
Speed is pretty much straightforward. It takes millisecond as a parameter to define how fast the text should cycle through. You can also adjust the CSS animation speed in the simpletextrotator.css
by simply changing the values of all the transitions (prefix) under the .rotating
style.
[tut demo=”https://onextrapixel.com/examples/jquery-super-simple-text-rotator/” download=”https://onextrapixel.com/examples/jquery-super-simple-text-rotator/jquery-super-simple-text-rotator.zip”]
Conclusion
Now you have a super simple rotating text on your website with almost no effort. I hope you enjoy this tutorial and the plugin I built. Once again, if you have any questions or suggestions, please let me know anytime in the comments below.