栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

真·数字滚动特效

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

真·数字滚动特效

原文链接
install
$ npm install --save number-flip
usageimport 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: 1000
})
create one and flip it later:
const el = new Flip({
  node: $('.flip'),
  from: 9527
})

el.flipTo({to: 42})
costumize animate duration:
new Flip({
  node: $('.flip'),
  from: 9527,
  to: 42,
  duration: 2
})
more complex usage
new Flip({
  node: $('.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);
  },
  systemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})
TODO
  •  flip with FLIP

  •  browser compatibility list

  •  thresh maybe

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242779.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号