🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple text elements rotator jQuery plugin.You can include multiple CSS3 effects with Animate.css

CSS Plugins Text Effect

Documentation

WordsRotator

A simple text elements rotator plugin

Visit the project page for more information and usage examples!

Install

Five simple steps to install and configure wordsRotator plugin

Step 1. Include jQuery

Include the last version of jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Step 2. Include jQuery Words Rotator Code

Insert into your page's head tag:

<link rel="stylesheet" href="jquery.wordrotator.css"> <script src="jquery.wordrotator.js"></script>

Step 3. Include the CSS3 effects

Choose and build the CSS3 animation effects from Animate.css

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

Step 4. HTML code

<p>An <span id="myWords"></span> a day keeps the doctor away</p> 

Step 5. Javascript code

<script type="text/javascript">     $(function () {         $("#myWords").wordsrotator({             words: ['apple', 'apricot', 'avocado']         });     }); </script> 

Configure

$("#myWords").wordsrotator({     autoLoop: true,				//auto rotate words     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     words: ['apple', 'apricot', 'avocado']	//Array of words, it may contain HTML values });

License

Wordsrotator is licensed under the MIT license.


You May Also Like