Create text animation like airport terminal
The TextShuffle.js is a simple jQuery based solution for creating the text animation like displayed in the airport terminals.
Demo1 Demo2
The available options allow you to set the speed of animating the text shuffling, bind event (click, mouseover, mouseleave etc.) and characters to be used for shuffling the text. See the section below for how to setup and use this plug-in.
Developer page Download plug-in
Installing the text shuffle plug-in
You may install the plug-in for creating terminal like animated text by Bower:
bower install textshuffle.js –save
Or use the old-fashioned way i.e. download the plug-in from above link and include the necessary JS files in the web page:
<script src=”js/textShuffle/jquery.textShuffle.js”></script>
Initiate the plugin with default or custom options. There you may specify the text to be animated:
$('#text-animation').textShuffle({ chars: "01#/&%$?_-%*", // Specify characters here for text animation bindEvent: "mouseover", animationSpeed: 25; //Specify the speed of text animation. The default value is 10 });
See the demos below for using this plug-in.
A demo of terminal like text animation
In this example, the text is shuffled with default settings. That means the default text, animation speed, and bind event will be used. Bring the mouse over the text to see how text shuffle occurs:
See online demo and code
The Script:
<script> $(function () { $('.terminal-ani-demo').textShuffle(); }); </script>
The markup:
<h1>A demo of text shuffle</h1> <div class="terminal-ani-demo">Bring the mouse here!</div>
An example of text shuffling with custom values
For this demo, the values for the animation speed, bind event and characters are specified by using the available options:
See online demo and code
The script:
<script> $(function () { $('.terminal-ani-demo').textShuffle({ chars:'12345609876', animationSpeed: 65, bindEvent:'click' }); }); </script>
You may set other events in the bindEvent option e.g. mouseenter, mouseleave etc.