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

0 237

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="https://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">latestblog.org</div>
<div class="do-splitflap">Latest Blog</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.

Leave A Reply

Your email address will not be published.