42

GitHub - gaoryrt/number-flip: increase your number with flipping animation

 5 years ago
source link: https://github.com/gaoryrt/number-flip
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

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:

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})

costumize animate 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: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})

TODO

  • flip with FLIP
  • syntax
  • browser compatibility list

license

MIT

contributing

  1. fork this repo
  2. git checkout -b NEW-FEATURE
  3. git commit -am 'ADD SOME FEATURE'
  4. git push origin NEW-FEATURE

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK