Minimal Text Transition Animation Plugin - textTweener
File Size: | 4.64 KB |
---|---|
Views Total: | 1104 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
textTweener is a lightweight jQuery plugin used to create a text rotator that transitions through a group of text content with a smooth tween animation.
How to use it:
1. Include both jQuery JavaScript library and the jQuery textTweener plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script> <script src="jquery-textTweener.min.js"></script>
2. Create a group of text wrapped in inline elements span
.
<div id="texttween"> <span class="text">Text 1</span> <span class="text">Text 2</span> <span class="text">Text 3</span> <span class="text">Text 4</span> <span class="text">Text 5</span> </div>
3. Initialize the plugin to start the text rotator on page load.
$("#texttween").TextTweener();
4. Change the default duration between text transition.
$("#texttween").TextTweener({ duration: "5000" // 5 seconds });
This awesome jQuery plugin is developed by Realmaker. For more Advanced Usages, please check the demo page or visit the official website.