Split Flap Style Text Display Plugin - jQuery Fallblatt

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.