$('#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,
});
$("#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" } })