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
   
Cross-fading Text Slideshow Plugin For jQuery - Cycletext

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.