Airport Flight Board Text Effect with jQuery - flightboard

flightboard is an extremely simple and easy jQuery text effect plugin that displays text in a circle like airport flight board animation effect.

You might also like:

• Airport Information Board Text Effect

Basic Usage:

1. Include jQuery library and jQuery flightboard plugin on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flightboard.js"></script>

2. Markup

<div id="basicBoard"></div>

3. The javascript

<script type="text/javascript">
$(function () {
	$('#basicBoard').flightboard({messages: ['FIRST MESSAGE', 'SECOND MESSAGE'],
		lettersImage: 'flightBoardLarge.png',
		shadingImages: ['flightBoardHigh.png', 'flightBoardShad.png']});
});
</script>

4. Options

$(selector).flightboard({ 
    lettersImage: 'img/flightBoardLarge.png', // Amalgamated image for letters background 
    lettersSize: [25, 34], // Width and height of individual letters 
    lettersSeq: ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // Positioning of letters within image 
    messages: ['SEE THE FLIGHT BOARD', 'CHANGE MESSAGES'], // Messages to display 
    maxLength: 20, // Maximum length of flight board 
    flips: [3, 5], // Number of flips before new value, 
        // may be an array with minimum and maximum flips 
    sequential: false, // True to step through all letters, false for random ones 
    speed: 500, // Time taken (milliseconds) for a single transition 
    repeat: true, // True to automatically trigger a new transition after a pause 
    pause: 2000, // Time (milliseconds) between transitions 
    selection: 'forward', // How to choose the next item to show: 
        // 'forward', 'backward', 'random' 
    shading: true, // True to add shading effects, false for no effects 
    opacity: 0.5, // Maximum opacity (0.0 - 1.0) for highlights and shadows 
    // Locations of the highlight/shadow images for IE 
    shadingImages: ['img/flightBoardHigh.png', 'img/flightBoardShad.png'], 
    beforeFlip: null, // Callback before flipping 
    afterFlip: null // Callback after flipping 
}); 
 
$.flightboard.setDefaults(options) // Change global settings 
 
$(selector).flightboard('option', options) // Change settings 
$(selector).flightboard('option', name, value) // Change one setting 
$(selector).flightboard('option', name) // Retrieve a setting value 
 
$(selector).flightboard('destroy') // Remove flight board 
 
$(selector).flightboard('stop') // Stop automatic flipping 
$(selector).flightboard('start') // Start automatic flipping 
$(selector).flightboard('flip', next) // Flip to next message 
$(selector).flightboard('current') // Retrieve current message 
$(selector).flightboard('next') // Retrieve next message 

Change log:

v2.0.0 (2014-03-29)

• update.

---

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