Author: | gaoryrt |
---|---|
Views Total: | 3,249 views |
Official Page: | Go to website |
Last Update: | April 26, 2023 |
License: | MIT |
Preview:

Description:
number-flip is a JavaScript library to animate numbers (or any other characters) with an engaging rolling effect.
Ideal for countdown timers, visitor counters, visual slot machines, and any case where you want to animate increasing/decreasing numbers.
How to use it:
1. Install and import the number-flip as a module.
# NPM $ npm i number-flip
import { Flip } from 'number-flip'
2. Create a new Flip instance and specify the from/to numbers.
new Flip({ node: $('.myElement'), from: 1234, to: 0 })
3. Set the delay & duration of the rolling effect.
new Flip({ node: $('.flip'), from: 1234, to: 0, duration: 3 // in seconds delay: 1, // in seconds })
4. Determine whether to roll the characters one by one. Default: false.
new Flip({ node: $('.flip'), from: 1234, to: 0, direct: true, })
5. This example shows how to create slot machines by using the separator
parameter.
const slot = new Flip({ node: $(".slot"), from: 777, systemArr: ["🍒", "🍏", "🍍", "🌴", "bar", "🔔", "🍇", "7", "💰", "🍈", "bar"], seperateOnly: 0, separateEvery: 3, }); slot.flipTo({ to: ~~(Math.random() * 999) });
6. Apply a custom easing function.
new Flip({ node: $('.myElement'), from: 1234, to: 0, easeFn: function(pos) { if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); return 0.5 * (Math.pow((pos-2),3) + 2); }, })