Flapper is a jQuery plugin that replicates the split-flap (or "Solari") displays that used to be common in train stations and airports.

These displays 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 CSS transformations.

Flapper can display words or numbers, with or without formatting. It's ready to use with six sizes, two color themes, and two animation styles. Best of all, it's written entirely in HTML and CSS, so you can make it look however you'd like.

Two Animation Effects

Flapper's two animation modes allow you to design with special effects without affecting the performance of your page. Choose from gorgeous and detailed or quick and minimalistic.

Words and Numbers

Flapper can display any text or numeric sequence. It comes with presets for numeric, alphabetic, and alphanumeric displays. You can configure Flapper to display any symbols or international characters that you require.

Six Sizes and Two Colors

Flapper comes with six size presets and two color schemes, so you can quickly drop it into your page.

Themeable

Customize Flapper with your own fonts, colors, and gradients. Run the digits together, or space them far apart. Tweak Flapper's default styles, or create your own from scratch.

Easy-to-Use

Simply attach Flapper to any input element anywhere on your page. Flapper will hide the element and replace it with a numeric display. Then, it will listen for change events on the element's value and update the display automatically.

<input id="display" />

<script language="JavaScript">
    $('#display').flapper(options).val(12345).change();
<script>

Any time the input's value changes, just call change() to update the display. Flapper takes care of the rest.

Start Using Flapper

Head over to Flapper's GitHub page to download the code and read the documentation. Flapper is released under the MIT license, which allows redistribution and modification with attribution.