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

by Posted on

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.

Split Flap jQuery Plugin



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

<div class="do-splitflap">iamrohit.in</div>
<div class="do-splitflap">Rohit Kumar</div>
<div class="do-splitflap">My Public Notebook</div>

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.

DEMO | DOWNLOAD

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.



Published by admin