JQuery Split Flap Text Animation Plugin | Flapper

Flapper is a jQuery plugin that copies the Split-flap (or “Solari”) screens that were popular at train stations and airports, and your father’s alarm clock in the 1970s.

To use, simply attach Flapper to any entry on your page. When the input change event is fired, Flapper will update the display.

Features:

  • easy to use.
  • Dark and light themes.
  • It comes in six preset sizes and two color fonts.
  • Supports digital, alphanumeric, and alphanumeric displays.
  • Two animation effects, with or without switching.

How to make use of it:

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

<link href="css/flapper.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="src/jquery.flapper.js"></script>

2. Include numberformatter and transform jQuery plugins for the greatest end result.

<script src="jquery.transform.min.js"></script>
<script src="jquery.numberformatter.min.js"></script>

3. Create a container for the place you want to show the animation.

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

4. Attach the plugin to the input subject and update the show as follows:

// initialize the plugin
var $header_display = $('#header_display');
$header_display.flapper({
  width: 7,
  chars_preset: 'alpha'
});

// update the display
$('#display').flapper().val(' ').change(); 

5. Available CSS classes to customize the looks of the show.

<input class="XXL dark" id="header_display" />

6. All default settings to config the plugin.

$('#anyElement').flapper({

  // The width of the display in digits
  width: 6,

  // A object with options to send to the numberformatter plugin. 
  // This plugin isn't required unless this is set.
  format: null,

  // or 'left'
  align: 'right',

  // Set this to 0 if you're not using the numberformatter plugin and you want to pad your numbers with zeros.
  padding: ' ',

  // If you'd like your own custom stack of letters and numbers, pass an array of characters here. 
  // This value will override the chars_preset value. 
  // You can also pass an array of strings, in which case Flapper will display entire words as a single digit.
  chars: null,

  // or 'alpha', 'alphanum', 'hexnum'
  chars_preset: 'num',

  // Animation duration in milliseconds.
  timing: 250,

  // Min animation duration.
  min_timing: 10,

  // Threshhold in milliseconds.
  threshhold: 100,

  // determine whether to use jQuery transform plugin
  transform: true,

  // Cycle interval
  cycleInterval: null,

  // Callback functions
  on_anim_start: null,
  on_anim_end: null,  
});

Character presets are:

  • num&nbsp;, 1-9, 0, dollar sign, decimal point, comma, colon
  • hexnum&nbsp;, 1-9, A-F, 0
  • alpha&nbsp;, A-Z
  • alphanum: All of alpha and num

Flapper’s size presets work like this:

.flapper.S sets the height of each digit.

.flapper.S .digit div sets the height (again!) and width of each digit.

.flapper.S .digit div.top clips the top half of each digit.

.flapper.S .digit div.bottom clips the bottom half of each digit, minus one pixel at the top (the horizontal stripe.)

jQuery Plugin For Split Flap Text Animation, Flapper Plugin/Github, jquery airport board effect, split flap display simulator, jaykayess flapper, flapper github, flapper js

Text-Animation-Plugin-Flapper-Demo


See Demo And Download

Official Website(jayKayEss): Click Here

This superior jQuery/javascript plugin is developed by jayKayEss. For extra advanced usage, please go to the official website.

Share