Configurable Fading Animations For Text - jQuery TextFade

Configurable Fading Animations For Text - jQuery TextFade

TextFade is a lightweight jQuery text animation plugin which shows and hides text with random or sequential fade in and fade out animations.

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.

  • Publication date: 15.01.2018
  • Source