Sequential Text Animation Plugin For jQuery - autochange_text.js

File Size: 14.6 KB
Views Total: 3180
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sequential Text Animation Plugin For jQuery - autochange_text.js

autochange_text.js is a small jQuery plugin for sequential text animation that automatically fades through an array of specified text at a given speed.

How it works:

It provides a change() function that fades out an element and when this is done, it changes the text of it to be the next element of the textList. When the textList is done, it restarts its counter, so it reuses the first element.

The counter sets an interval that every textDuration seconds updates the text by running change() with textList as a parameter

How to use it:

1. Insert the latest version of jQuery library and the jQuery autochange_text.js script into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="autochange_text.js"></script>

2. Create a paragraph element with the ID changing.

<p id='changing'></p>

3. Create an array of text you want to rotate through.

const myTextList = ['jQuery', 'Script', 'Net', 'Text','Plugin']

4. Enable the plugin and done.

startChangingText(myTextList)

5. Customize the duration of the fade animation.

// 3 seconds
startChangingText(myTextList, 3)

This awesome jQuery plugin is developed by abartzos. For more Advanced Usages, please check the demo page or visit the official website.