jQuery Plugin For Split Flap Text Animation - Flapper

jQuery Plugin For Split Flap Text Animation - Flapper
File Size: 49.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Flapper is a jQuery text display plugin for creating animated split flap text animations that are found in train stations and airports, where they typically display departure and/or arrival information and do that cool flipping of letters to display the new information.

The animations used a rotating stack of letters and numbers printed on hinged panels. As the stack rotated, a new symbol would fall into place. Flapper recreates this effect using CSS3 transforms.

Features:

  • Easy to use
  • Themeable
  • Comes with six size presets and two color schemes
  • Supports for numeric, alphabetic, and alphanumeric displays
  • Two Animation Effects, with or without transform

You might also like:

Basic Usage:

1. Include the latest jQuery library and jQuery Flapper Plugin on the web page

<link href="css/flapper.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.flapper.js"></script>

2. Include numberformatter and transform jQuery plugins for best result. But the plugin can also be used on its own with fewer special effects.

<script src="transform/dist/jquery.transform-0.9.3.min.js"></script>
<script src="numberformatter/jquery.numberformatter-1.2.3.min.js"></script>

3. Create a container where you'd like display the animation

<div class="display">
<input class="XXL" id="header_display" />
</div>

4. The javascript

<scriptlanguage="javascript">
$(document).ready(function(){
var$header_display=$('#header_display');
$header_display.flapper({
width:7,
chars_preset:'alpha'
});

setTimeout(function(){
$header_display.val('FLAPPER').change();
vartoggle=true;
setInterval(function(){
if(toggle){
$header_display.val('FLAPPER').change();
}else{
$header_display.val('').change();
}
toggle=!toggle;
},5000);
},1000);

});
</script>

5. Default settings.

width: 6,
format: null,
align: 'right',
padding: ' ',
chars: null,
chars_preset: 'num',
timing: 250,
min_timing: 10,
threshhold: 100,
transform: true,
on_anim_start: null,
on_anim_end: null

Change logs:

2015-08-18

  • Add in methods for adding and removing flapper digits on the fly

v1.1.3 (2014-02-14)

  • Set explicit content-sizing on Flapper elements
  • Use jQuery.inArray() to avoid problems with lastIndexOf() and IE8

v1.1.2 (2013-08-11)

  • Switch animation mode from fast to slow automatically.

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