Reveal Text With A Random Shuffle Effect - Glitch.js

File Size: 4.44 KB
Views Total: 2658
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Reveal Text With A Random Shuffle Effect - Glitch.js

Glitch.js is a tiny yet configurable text animation plugin that reveals the text by shuffling scrambled characters at a certain speed similar to the airport terminal.

See also:

How to use it:

1. Download & unzip the plugin and then include the JavaScript glitch.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/glitch.js"></script>

2. Attach the function glitch() to the target container in which the text you want to animate.

<h2>jQueryScript.Net</h2>
$(function(){
  $('h2').glitch();
});

3. Determine the characters to be used during the shuffle.

$(function(){
  $('h2').glitch({
    chars: '!<>-_\\/[]{}—=+*^?#________'
  });
});

4. Determine the duration of the shuffle animation.

$(function(){
  $('h2').glitch({
    charTime: 10
  });
});

5. Customize the final text. Defaults to the text found within the container where the plugin called.

$(function(){
  $('h2').glitch({
    finalText: undefined
  });
});

6. Execute a function after the shuffle animation is finished.

$(function(){
  $('h2').glitch({
    done: function(){
      console.log('done!');
    }
  });
});

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