Awesome Text Rotator Plugin With Smooth Transitions - textition
File Size: | 6.03KB |
---|---|
Views Total: | 5137 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

textition is a cool jQuery text rotator plugin that allows to add rotating text with smooth transition animations to your web page.
Features:
- Uses CSS3 perspective, transition and transform properties.
- 5 built-in animations: ease, ease-in, ease-out, ease-in-out and linear
- No extra CSS styles required.
- Autoplay on load.
- Works with modern browsers.
- Simple and easy to use.
See also:
- Simple Text Rotation Plugin - billboard
- jQuery Text Rotator Plugin with CSS3 Animations - Words Rotator
- Lightweight jQuery Text Rotator Plugin - Dynamo.js
- Simple jQuery Text Rotator Plugin with Nice Fading effects - jLetter
Basic Usage:
1. Create a container and add a set of text for the text rotator.
<div id="demo"> <p>First text</p> <p>Second text</p> <p>Third text</p> </div>
2. Include textition.js script after jQuery javascript library.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="textition.js"></script>
3. Initialize the plugin with options.
<script> $(function() { $('#demo').textition({ speed: 1, animation: 'linear', map: { x: 200, y: 100, z: 0 }, autoplay: true, interval: 2 }) }); </script>
4. All the default options.
<script> $(function() { $('#demo').textition({ map: { // Transition distance for each axis in pixels x: 100, y: 50, z: 1000 }, speed: 1, // Number of seconds that textition animation should take to complete. animation: 'ease', // ease, ease-in, ease-out, ease-in-out and linear handler: 'click', // The event handler which start transition. perspective: 300, // CSS3 perspective property for axis Z autoplay: false, // Automatic text changes interval: 3, // Interval between automatic text changes }) }); </script>
This awesome jQuery plugin is developed by dimajt. For more Advanced Usages, please check the demo page or visit the official website.