jQuery Text Rotator Plugin with CSS3 Animations - Words Rotator

File Size: 394KB
Views Total: 18565
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Text Rotator Plugin with CSS3 Animations - Words Rotator

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

See also:

Features:

  • Simple and lightweight.
  • Stop rotating on mouse hover.
  • Begin rotating on mouse click.
  • Supports rotating links, images, and icons, not only text.
  • Cool, fun, and cross-browser animations with Anime.css.

Basic Usage:

1. Add required CSS files in the head section of your page.

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

2. Create a container for the text rotator.

<span id="demo"></span>

3. Include jQuery library and jQuery Words Rotator 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.wordrotator.js"></script>  

4. Call the plugin with options.

<script type="text/javascript">
$(function () {
$("#demo").wordsrotator({
words: ['word 1','word 2','word 3'], // Array of words, it may contain HTML values
randomize: false, //show random entries from the words array
stopOnHover: false, //stop animation on hover
changeOnClick: false, //force animation run on click
animationIn: "flipInY", //css class for entrace animation
animationOut: "flipOutY", //css class for exit animation
speed: 2000 // delay in milliseconds between two words
});
});
</script>

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