Super Simple Text Rotator with Almost No Effort Required

Super Simple Text Rotator with Almost No Effort Required

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:

Text Rotator

[tut demo=”http://www.onextrapixel.com/examples/jquery-super-simple-text-rotator/” download=”http://www.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.

Spin Effect

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=”http://www.onextrapixel.com/examples/jquery-super-simple-text-rotator/” download=”http://www.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.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.

Comments

    • Puwadon Sricharoen,
    • September 7, 2013
    / Reply

    Thank you. I Like this.

    • EAPeru,
    • September 17, 2013
    / Reply

    I am trying out the rotator and I like it. Two questions: 1) how do I modify the font in the rotator text? 2) how do I modify the vertical space of the container of the rotator?

      • Amit Kolambikar,
      • August 2, 2014
      / Reply

      .rotate{
      font-size:2em;
      font-weight:400;
      line-height:2; //for vertical space
      }

    • Simon Clay,
    • November 14, 2013
    / Reply

    Thanks, this is great. But I’m finding it displays badly in all versions of IE.

      • Joel Mayer,
      • August 31, 2015
      / Reply

      Yep.

    • Ola,
    • November 14, 2013
    / Reply

    Hi, thank you for this hard work. I would want to use this effect on wordpress, i dont know if you can help me with that. Thanks once again. Would appreciate your help.

    • Alone Nascimento,
    • November 27, 2013
    / Reply

    Theres is a callback trigger?

    • John Martin,
    • June 23, 2014
    / Reply

    the problem is, the script starts running prior to anything else being loaded. This makes is so that people see the entire line of text on the screen for a second before it compresses to display only one line at a time. So how would you impliment this code so that it does not display the whole lines of text prior to loading AND not start playing until after the entire page has loaded? If you can do, then I would be officially impressed.

    • Roberto Lopez,
    • December 16, 2014
    / Reply

    Hi Pete,

    Love this feature but I have failed at making it work in my Shopify Store.

    1º I have added simpletextrotator.css and jquery.simple-text-rotator.js to my assest folder.

    1.1º Add these two files and jquery to my theme ( to the head ):

    {{ ‘simpletextrotator.css’ | asset_url | stylesheet_tag }}
    {{ ‘jquery.simple-text-rotator.js’ | asset_url | script_tag }}

    2º Create a snipped called text-rotator as follows:

    Super Simple, Customizable, Light Weight, Easy Text Rotator with Style
    * I have truncated the tag span by purpose otherwise it would be displayed in here.

    $(“.rotate”).textrotator();

    3º Include this snipped to my index:

    {% include ‘text-rotator’ %}

    It does not work for me. I do not know why. It only displays the entire message: Super Simple, Customizable, Light Weight, Easy Text Rotator with Style

    Why Is this not working for me? am I doing anything wrong?

    Thanks in advance

    • IDGuy,
    • February 25, 2015
    / Reply

    Any way to make the text linkable? I have tried replacing the tags with their html entities but that shows the tags on screen and does not link.

    • ericschmitzer,
    • March 25, 2015
    / Reply

    Couldn’t get it to work properly. it just repeats the first word animation over and over again, not changing to any other word, and only the Demo 1 looks good in IE. The rest flip the text upside down or reverse.

      • Joel Mayer,
      • August 31, 2015
      / Reply

      Same issue here. I know that IE is on its way out, but it kind of makes it unuseable. I am sure someone smarter than me could make an update on GitHub.

    • Scott Rembert,
    • April 19, 2015
    / Reply

    Hey Pete. my teacher at DeVry University showed us in class this rotator a few years ago.And I thought it was super cool. I have tried numerous times and it did not work. But after finding some simpler JQuery projects,and got them to work.I tried again & BRAVO! I have it working. I will make a link page to your site for other designers to get it. My website is under construction but I will post a link when it is functional.

    • deltadan79,
    • June 20, 2015
    / Reply

    Any quick way to limit the number of cycles? :) Awesome, worked great! Had to fiddle with where to place references to the js, at end of document, and finally got it working. Many thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.