Cross-fading Text Slideshow Plugin For jQuery - Cycletext
File Size: | 6.22 KB |
---|---|
Views Total: | 1714 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Cycletext is a really simple, AMD & UMD compatible text rotator jQuery plugin which automatically fades through an array of predefined text just like a slideshow or carousel. Powered by window.requestAnimationFrame() API.
How to use it:
1. Load both jQuery library and the jQuery Cycletext plugin at the end of the html document.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="cycletext.js"></script>
2. Create an empty DIV element which will be served as the container for your text slideshow.
<div id="example"></div>
3. Define an array of text to be presented in the slideshow.
myWords = ["Hello!", "World!", "jQuery!", "Script!"];
4. Active the plugin to render a basic text slideshow inside the DIV container you just created.
$("#example").cycleText(myWords);
5. Default options to config the text animation.
$("#example").cycleText(myWords,{ fadeInSpeed: 1000, displayDuration: 2000, fadeOutSpeed: 1000, delay: 500 });
This awesome jQuery plugin is developed by jeffreyeaton76. For more Advanced Usages, please check the demo page or visit the official website.