Random Text Print Animation Plugin With jQuery - textShake

File Size: 5.48 KB
Views Total: 839
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Random Text Print Animation Plugin With jQuery - textShake

textShake is a fancy, configurable text animation plugin for jQuery that enables you to print any text with a random char combination effect.

How to use it:

1. To get started, include the JavaScript file jquery.textShake.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.textShake.js"></script>

2. And then call the plugin with default options on the text container. That's it.

<p class="demo">Lorem ipsum dolor sit amet</p>
$(document).ready(function(){
  $('.demo').textShake();
});

3. To config the text animation, define the settings by passing an object to the textShake() method:

$(document).ready(function(){

  $('.demo').textShake({

    // Trims spaces and breaklines
    trim_on_start: true,

    // in milliseconds
    letter_delay: 60,

    // Splits words longest than 8 char to avoid random char combinations
    split_words: 8,

    // autoplay on page load
    autoplay: true,

    // fixes container's height
    fix_height: false

  });
  
});

4. To play the text animation manually.

$(document).ready(function(){

  $('.demo').textShake({

    autoplay: false

  });

  $('.demo').data('textShake').play();

});

5. Execute a callback function when the animation is completely finished.

$(document).ready(function(){

  $('.demo').textShake({

    onComplete: function(){
      // do something
    }

  });

});

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