Text Rotator v0.2-BETA

Rotator is a lightweight and customizable jQuery plugin for rotating text and some words of your text with awesome CSS3 animations.

Welcome to

  • jQuery Plugin
  • Text Rotator
  • HT2.PL

Lorem ipsum sit amet.

  • Europe
  • Africa
  • Poland
  • America

  • Rotator words and some words of your text
  • Awesome CSS3 animations
  • Rotator is lightweight and easy to setup

1. Include to the CSS animation library and rotator.css at the end of your web page.
Link to Animate.css.

<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/rotator.css">

2. Include jQuery library and jquery.rotator.js at the end of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/jquery.rotator.js"></script>

3. Activate rotator

<script>
$(".rotate").rotator();
</script>

5. Basic usage

<div id="example1" class="rotate" data-rotate-interval="3000" data-rotate-animate="zoomIn,zoomOut">
                      
    <h1>Welcome to <span class="rotate-arena"></span></h1>
                          
    <ul>
       <li>text totate 2</li>
       <li>text totate 3</li>
       <li>text totate 4</li>
       <li>text totate 5</li>
    </ul>
                          
</div>

data-rotate-interval - Change the animation duration. The value is given in milliseconds. default: "5000"

data-rotate-animate - Animation style. Pick an animation style in Animate.css. default: "fadeIn,fadeOut"