Split Flap Style Text Display Plugin - jQuery Fallblatt
File Size: | 8.26 KB |
---|---|
Views Total: | 1868 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Fallblatt is a customizable jQuery text animation plugin that displays any text with a shuffling animation similar to the split-flap display as you've seen in airports and train stations.
See Also:
- Airport Information Board Text Effect
- jQuery Plugin For Split Flap Text Animation - Flapper
- Airport Flight Board Text Effect with jQuery - flightboard
- Airport-style Shuffle Text Effect With jQuery - TextShuffle.js
- Watch Dogs Like Text Shuffle Animation – swapdogs.js
- Create A Random Text Shuffle Effect With jQuery - Randomize Text
- Shuffle Letters Effect In Pure JavaScript – shuffle-letters.js
- Random Shuffled Text Effect with jQuery Chaffle Plugin
- Simple Text Shuffle Effect with jQuery - Shuffle Text
- Airport-like Text Shuffle Animation In jQuery
How to use it:
1. Link to jQuery JavaScript library and the Fallblatt's files in the document.
<link href="/path/to/css/fallblatt.css" rel="stylesheet" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/src/fallblatt.js"></script>
2. Create a container to hold the split-flap display.
<div id="splitFlapExample"></div>
3. Create a new instance of the split-flap display.
$("#splitFlapExample").fallBlatt({ // options here })
4. Display your content in the split-flap display. This returns a promise $.Deferred().promise()
for waiting until the text is displayed.
$("#splitFlapCanvas").fallBlatt("display", { // customize position here pos: [x,y], // text to animate content: "A" });
5. Customize the animation with the following options.
$("#splitFlapExample").fallBlatt({ flapHeight: 120, flapWidth: 90, flapScale: 1, flapSpacingExtraHeight: 0, flapSpacingExtraWidth: 0, flapCharset: { // Index 0 is the default character (space) // If an unknown character is observed, the last char from the list will be used chars: " 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ'‘?’“!”(%)[#]{@}/&\\<-_+÷×=>$€:;,.~*rbgyow", options: { // "CHAR": [List of classes to attach to this char] "(": ["splitFlapCharBrackets"], "%": ["splitFlapCharSpecial"], ")": ["splitFlapCharBrackets"], "[": ["splitFlapCharBrackets"], "#": ["splitFlapCharSpecial"], "]": ["splitFlapCharBrackets"], "{": ["splitFlapCharBrackets"], "@": ["splitFlapCharSpecial"], "}": ["splitFlapCharBrackets"], "/": ["splitFlapCharBrackets"], "&": ["splitFlapCharSpecial"], "\\": ["splitFlapCharBrackets"], "_": ["splitFlapCharExtremes"], "$": ["splitFlapCharSpecial"], ":": ["splitFlapCharExtremes"], ";": ["splitFlapCharExtremes"], ",": ["splitFlapCharExtremes"], "~": ["splitFlapCharTilde"], "*": ["splitFlapCharAsterisk"], "r": ["splitFlapCharColourBase", "splitFlapCharColourRed"], "b": ["splitFlapCharColourBase", "splitFlapCharColourBlue"], "g": ["splitFlapCharColourBase", "splitFlapCharColourGreen"], "y": ["splitFlapCharColourBase", "splitFlapCharColourYellow"], "o": ["splitFlapCharColourBase", "splitFlapCharColourOrange"], "w": ["splitFlapCharColourBase", "splitFlapCharColourWhite"] } }, flapCss: { flapContainerScaleClass: "splitFlapScaleLayer", flapContainerClass: "splitFlapContainer", flapContainerDividerBaseClass: "splitFlapContainerDividerBase", flapContainerDividerClass: "splitFlapContainerDivider", flapContainerDividerLinkLeftClass: "splitFlapContainerDividerLinkLeft", flapContainerDividerLinkRightClass: "splitFlapContainerDividerLinkRight", flapContainerCharClass: "splitFlapContainerChar" } })
This awesome jQuery plugin is developed by Roosterfish. For more Advanced Usages, please check the demo page or visit the official website.