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:

• Airport-style Shuffle Text Effect With jQuery - TextShuffle.js
• Watch Dogs Like Text Shuffle Animation – swapdogs.js
• Create A Random Text Shuffle Effect With jQuery - Randomize Text
• Shuffle Letters Effect In Pure JavaScript – shuffle-letters.js
• Random Shuffled Text Effect with jQuery Chaffle Plugin
• Simple Text Shuffle Effect with jQuery - Shuffle Text
• Airport-like Text Shuffle Animation In jQuery

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.