number-flip
v1.2.3
Published
Change number with flipping animation
Downloads
1,176
Readme
number-flip
Change number with flipping animation
install
$ npm install --save number-flip
usage
import number-flip
import { Flip } from 'number-flip'
use it!
create one and make it flip immediately:
new Flip({
node: $('.flip'),
from: 9527,
to: 42
})
flip one with delay:
new Flip({
node: $('.flip'),
from: 9527,
to: 42,
delay: 1 // second
})
create one and flip it later:
const el = new Flip({
node: $('.flip'),
from: 9527
})
el.flipTo({to: 42})
customize animation duration:
new Flip({
node: document.querySelector('.flip'),
from: 9527,
to: 42,
duration: 2 // second
})
more complex usage
new Flip({
node: document.querySelector('.flip'),
from: 73,
to: 25,
duration: 2,
delay: 1,
easeFn: function(pos) {
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
},
// for more easing function, see https://github.com/danro/easing-js/blob/master/easing.js
systemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})
CSS customizable:
HTML structure of a 3-digits flip would be like:
.number-flip
.ctnr.ctnr0
.digit*10
.ctnr.ctnr1
.digit*10
.ctnr.ctnr2
.digit*10
The height / width of .number-flip
is based on the height / width of .digit
, you can customize the size by changing the css of .digit
:
.number-flip { ... }
.ctnr { ... }
.digit { ... }
or you can rename it in config:
new Flip({
containerClassName: 'c',
digitClassName: 'd',
separatorClassName: 's'
})
separator:
Spearator allowed
new Flip({
node: $('.flip'),
from: 95279527,
separator: ','
})
even more
new Flip({
node: $('.flip'),
from: 95279527,
separator: ['万', '亿', '兆'],
separateEvery: 4
})
syntax
var flipInstance = new Flip(options)
flipInstance.flipTo(instanceOptions)
return value
The returned Flip instance has a function called flipTo
.flipTo
takes one instanceOptions
, so you can start the flip animation whenever you want.
parameter
options
node
: AnElement
object representing the animation container. Make sure this element is already existed in the DOM when younew
the instance.from
: The number that animation starts from.Optional
if you want to flip with 0. Expected a positive integer.to
: The number that animation rolls to.Optional
if you want to start manually. Expected a positive integer.duration
optional
: The animation duration in seconds. If not specified,duration
defaults to 0.5 second.delay
optional
: The delay of animation in seconds. If not specified, there's nodelay
.easeFn
optional
: A easing function to be executed. If not specified,easeFn
defaults easeInOutCubic.systemArr
optional
: An array ten-lengthed, representing the content of each decimal rolling system. If not specified,systemArr
defaults to[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
.direct
optional
: A boolean representing if the number would rolling directly or one by one. For example, from 0 to 99, the ones place would pass 9 digits if is direct. Or if is not directly, would pass 99 digits, 9 rounds for each of the tens place. If not specified,direct
defaultstrue
.separator
: A string / array representing the separator, defaults off. Could set to a string or an array-of-string.seperateOnly
: A number representing the only separator, defaults0
.separateEvery
: The number per digit separator would add to, defaults3
, won't work ifseperateOnly
has been set.
instanceOptions
to
: Same asoptions.to
.duration
optional
: Same asoptions.duration
.easeFn
optional
: Same asoptions.easeFn
.direct
optional
: Same asoptions.direct
.
TODO
- [x] flip with FLIP
- [x] syntax
- [ ] browser compatibility list
license
MIT
credit
Special thanks to Browserstack providing cross-browser testing.
dev and build
yarn dev
yarn build
contributing
- fork this repo
git checkout -b NEW-FEATURE
git commit -am 'ADD SOME FEATURE'
git push origin NEW-FEATURE