table.documentation { width: 90%; border-collapse: collapse; margin: 24px auto; } table.documentation thead tr { background: #ddd; } table.documentation th { font-size: 12pt; font-weight: normal; padding: 8px; text-align: left; } table.documentation th.option_name { width: 15%; } table.documentation th.option_value { width: 20%; } table.documentation th.option_description { width: 65%; } table.documentation tr { border-width: 1px 0px 1px 0px; border-color: #ddd; border-style: solid; background-color: #eee; } table.documentation td { padding: 8px 8px 16px 8px; vertical-align: top; }
The flapper()
function accepts an object containing options with the following values:
Option | Value | Description |
---|---|---|
width |
6 (default) |
The width of the display in digits. Flapper will accept any value here, so be careful. If you want to display multiple pieces of information on one line, it's probably better to use multiple flappers. |
format |
null (default) | A object with options to send to the numberformatter plugin. This plugin isn't required unless this is set. |
align |
right (default) |
Flapper will right-align the display, and pad its value with spaces on the left. |
left |
Flapper will left-align the display, and pad its value with spaces on the right. | |
padding |
(default) |
Flapper uses this value to pad the display. Set this
to 0 if you're not using the numberformatter
plugin and you want to pad your numbers with
zeros. |
digits |
see below | A object with options for the digits. |
The digits take these options:
Option | Value | Description |
---|---|---|
timing |
150 (default) |
Animation duration in milliseconds. |
chars_preset |
num (default) |
Flapper will display only numerals and common punctuation (spaces, commas, decimal points, colons, negative and dollar signs.) |
alpha |
Flapper will display only spaces and capital letters. | |
alphanum |
Flapper will display all num values
plus capital letters. |
|
chars |
null | 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. |
animation |
medium (default) |
Flapper uses a very simple, four-frame animation as each new symbols falls into place. This is probably the best options for most applications. It requires the transform plugin. |
slow |
Flapper uses fully-tweened animations to show the symbols falling into place. This options is best for large displays with only a handful of digits (like the header on this page.) It also looks great with a slower timing value (≥ 200). It requires the transform plugin. | |
fast |
Flapper uses a minimal two-frame animation to show each symbol falling into place. Use this if you're using multiple displays on a page and you find that the animations looks jerky. This animation looks best with a fast timing value (≤100). This option doesn't require any plugins. |