The airport departure board effect is now available for everybody to use
If you need a new and cool effect for your website you need not to look for such anymore. The split flap display plugin for JQuery gives you the ability to turn every string into an amazing eye-catching animation as you may have seen on an airport departure board.
It’s very simple to use
You need only to include the jquery library and the plugin file called splitFlap.js
|
1 2 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script> <script type="text/javascript" src="splitFlap.js"></script> |
Invoke the plugin on any HTML DOM object with proper innerHTML (text only).
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function () { $('p').flapDisplay(); }); </script> |
Starting the animation goes like this:
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function () { $('p').flapDisplay(); $('p').flapDisplay('start'); }); </script> |
The plugin has two modes of operation. The default mode uses the textual content of the object given to the plugin and implements the airport departure board effect on it. The second mode uses an array of words passed to it for a more genuine split-flap display recreation. More detailed information about all the options and setting is available at the end of this article.
The JQuery plugin is prepared for almost anything you could want of it
Let’s look at some examples:
The common regular flip implemented on hover:
Just place the mouse in a cell and watch what happens
The delayed flip implemented on hover:
With this settings the chars start to flip gradually in contrast to the default settings where they all start together.
More realistic airport departure board:
In this example I’ve passed an array of words. You can see the result for yourself. As you can see it copes very well with special chars and different alphabets.
On-demand flip:
You could pass words to the plugin dynamically.
Plugin documentation
Settings:
delayed: [boolean]
Description: Controls whether the animation starts with all chars flipping together (delayed: false) or they are gradually included to the flipping process (delayed: true)
Default value: false
chars: [string]
Description: A string which specifies the chars that are to be used in the flipping process. In case you’ve missed a char that appears in some of the innerHTMLs the plugin will automatically detect and add it. Parsing less chars will result in a faster animation.
Default value: ‘$_!@#%()-12357890abcdefghijklmnopqrstuvwxyz ‘
words: [Array]
Description: Parse here an array of words for the plugin to use.
Default value: []
speed: [integer]
Description: Given in milliseconds this is the speed at which the plugin refreshes the string while flipping. Smaller number will result in a faster animation.
Default value: 70
interval: [integer]
Description: Given in milliseconds this is the pause time between words. If there are no words passed this parameter is obsolete
Default value: 2000