Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

README.md

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.

About

A simple text elements rotator plugin

Resources

License

Packages

No packages published
You can’t perform that action at this time.