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

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.