jQuery plugin to transform a div text into splitflap display airport-like – jquery.splitflap.js

jQuery plugin to transform a div text into splitflap display airport-like – jquery.splitflap.js
If you want to add simple splitflap display on your website like you have seen on airport then in this post I am going to share plugin called 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.

Integrate Split Flap jQuery Plugin

Libraries

Include jQuery core library + plugin library jquery.splitflap.js

<script src="http://code.jquery.com/jquery-1.10.1.min.js">script>
<script src="js/jquery/jquery.splitflap.js">script>

HTML

Create div with sample text which need to splitflap

="do-splitflap">iamrohit.in
>
="do-splitflap">Rohit Kumar
>
="do-splitflap">My Public Notebook
>

JS

Finally Call the plugin with default settings.

$(function() {   
 $('.do-splitflap').splitFlap();
});

You can also customize splitflap by passing following options in above function.

$('.do-splitflap').splitFlap({
	image:          'images/chars.png',
	imageSize:      '',
	charsMap:       'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789.,!?#@()+-=',
	charWidth:      50,
	charHeight:     100,
	charSubstitute: ' ',
	speed:          3,
	speedVariation: 2,
	text:           '',
	textInit:       '',
	autoplay:       true,
	onComplete:		function(){}
});

See live demo and download source code.

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Related