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

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.