Configurable Fading Animations For Text - jQuery TextFade

Configurable Fading Animations For Text - jQuery TextFade
File Size: 23.5 KB
Views Total:
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.