Airport-Like Text Flip Animation with jQuery and CSS3 - splitFlap

splitFlap is a jQuery plugin that flips text messages with sequential characters based on CSS3 transform and perspective properties. Similar to the airport flight board animation effect.

You might also like:

• Airport Information Board Text Effect
• Airport Flight Board Text Effect with jQuery - flightboard

How to use it:

1. Load the jQuery javascript library and required javascript files in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/mf/core/Core.js"></script>
<script src="js/jquery/jquery.splitflap.js"></script>

2. Wrap your text in an DOM element.

<div class="demo">jQuery</div>
<div class="demo">Script</div>
<div class="demo">.Net</div>

3. Call the plugin with default settings.

$(document).ready(function() {
$('.demo').splitFlap();
});

4. Available options

$(document).ready(function() {
$('.demo').splitFlap({
// the path to the image used by the splitflap.
image:          'images/chars.png',

// in CSS "background-position" format.
imageSize:      '',

// The string represented in the image.
charsMap:       'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789.,!?#@()+-=',

// The width of a character in the image, in pixels.
charWidth:      50,

// The height of a character in the image, in pixels.
charHeight:     100,

// The character used when the string contains a character not found in the charsMap.
charSubstitute: ' ',

padDir:         'left',
padChar:        ' ',

// The speed of the rotation, in letter by seconds.
speed:          3,

// Random speed added to the fixed speed.
speedVariation: 2,

// The destination text.
text:           '',

// The initial string the animation begin with.
textInit:       '',

// If set to false, you'll need to start the animation manually
autoplay:       true,

// Callback function when the aniamtion is complete.
onComplete:     function () {}
});
});

Change logs:

2015-02-13

• added onComplete callback.

2015-01-23

• Prevent non existing char from crashing the script
• Added text in options

---

This awesome jQuery plugin is developed by zemax. For more Advanced Usages, please check the demo page or visit the official website.