Press "Enter" to skip to content

Customizable jQuery Plugin for Rotating Text with CSS3 Animations

Rotator is a lightweight and customizable jQuery plugin to rotate text and some text words with cool CSS3 animations based on animate.css.

jquery text rotator, text rotator css, simple text rotator, javascript text rotator

How to make use of it:

1. Include the required animate.css and rotator.css in the document.

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet">
<link href="css/rotator.css" rel="stylesheet">

2. Create a word list for the text axis. Use Html5 data-* attributes to customize text animation.

<ul class="rotate"
    data-rotate-interval="3000"
    data-rotate-animate="fadeInDown,fadeOutDown">
  <li>jQuery</li>
  <li>jQuery plugin</li>
  <li>text rotator</li>
</ul>

3. Configure the plugin to activate the rotating text.

$(".rotate").rotator();

4. Plugin options.

$(".rotate").rotator({

animateClass : "animated",
interval     : "5000",
animate      : "fadeInUp,fadeOutDown"

});

jquery & css3 based text rotator Plugin/Github


See Demo And Download

Official Website(ht2pl): Click Here

This superior jQuery/javascript plugin is developed by ht2pl. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.