jQuery & CSS3 Based Text Rotator Using Animate.css

File Size: 9.33 KB
Views Total: 8120
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery & CSS3 Based Text Rotator Using Animate.css

A very simple jQuery plugin used to swap a list of words in your text with cool CSS3 animations based on animate.css

How to use it:

1. Include the required animate.css and rotator.css in your document's head section.

<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 list of words for the text rotator. Use Html5 data-* attributes to customize the text animations.

  • data-rotate-interval: animation interval in ms. Default: 3000.
  • data-rotate-animate: animation types. Default: fadeIn,fadeOut
<ul class="rotate"
  <li>jQuery plugin</li>
  <li>text rotator</li>

3. Initialize the plugin to active the text rotator on document ready.


4. Plugin options.


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


Change log:


This awesome jQuery plugin is developed by ht2pl. For more Advanced Usages, please check the demo page or visit the official website.