jQuery Text Rotator Plugin with CSS3 Animations - Words Rotator
File Size: | 394KB |
---|---|
Views Total: | 18674 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Words Rotator is a lightweight and customizable jQuery plugin for rotating text and some words of your text with awesome CSS3 animations.
See also:
- Simple Text Rotation Plugin - billboard
- Lightweight jQuery Text Rotator Plugin - Dynamo.js
- Simple jQuery Text Rotator Plugin with Nice Fading effects - jLetter
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.