Configurable Fading Animations For Text - jQuery TextFade
File Size: | 23.5 KB |
---|---|
Views Total: | 1175 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
TextFade is a lightweight jQuery text animation plugin which shows and hides text with random or sequential fade in and fade out animations.
How to use it:
1. Insert the minified version of the jQuery TextFade plugin after jQuery library (slim build).
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="jquery-textfade.min.js"></script>
2. The JavaScript to fade in or fade out text you specify.
jQuery.textFade(in, { text: 'text here' }); jQuery.textFade(out, { text: 'text here' }); // or jQuery.textFadeIn({ text: 'text here' }) jQuery.textFadeOut({ text: 'text here' }):
3. Config the fading effect with the following options.
jQuery.textFade(in, { // text to animate 'text': 'text here', // ltr_ttb: left-to-right character, top-to-bottom line // ltr_btt: left-to-right character, bottom-to-top line // rtl_ttb: right-to-left character, top-to-bottom line // rtl_btt: right-to-left character, bottom-to-top line // ttb_ltr: top-to-bottom character, left-to-right line // ttb_rtl: top-to-bottom character, right-to-left line // btt_ltr: bottom-to-top character, left-to-right line 'sequence': 'random', 'steps': { 'duration': 10, // in milliseconds 'threads': 1 // the amount of character replacements } });
4. Events available.
var instance = jQuery.textFade(action, option); instance.on("start.textFadeIn", function() { // ... }); instance.on("stop.textFadeIn", function() { // ... }); instance.on("start.textFadeIn", function() { // ... }); instance.on("stop.textFadeOut", function() { // ... }); instance.on("start.textFade", function() { // ... }); instance.on("stop.textFade", function() { // ... });
This awesome jQuery plugin is developed by mdesantis. For more Advanced Usages, please check the demo page or visit the official website.