Airport Terminal like text animation using jQuery: TextShuffle.js

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:

jQuery text animation terminal

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:

jQuery text animation custom

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.