jquery轻量级数字动画插件jquery.countup.js

所属分类:其他,UI-动画效果,滚动

 3963  46  查看评论 (0)
jquery轻量级数字动画插件jquery.countup.js ie兼容8

插件说明

jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画。

该数字动画插件可以控制动画的延迟时间和动画过渡时间。它依赖于Waypoints插件来监听滚动事件。

安装

可以通过npm或bower来安装jquery.countup.js插件。

npm install jquery.countup.js
bower install jquery.countup.js

使用方法

在页面引入jqueryjquery.waypoints.min.jsjquery.countup.min.js文件。

<script src="jquery.min.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.countup.min.js"></script>

HTML结构

使用<span>元素作为数字的容器。

<span class="counter">1,498,547.00</span>
<span class="counter">7.99</span>
<span class="counter">1455455</span>

你也可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间。

<span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>
<span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>

初始化插件

在页面DOM元素加载完毕之后,可以通过countUp()方法来初始化数字动画。

$('.counter').countUp();

也可以在初始化的时候传入配置参数。

$('.counter').countUp({
    delay: 10,
    time: 2000
});
  • delay:每个数字动画的延迟时间,单位毫秒。

  • time:计数动画总的持续时间。


相关插件-动画效果,滚动

图片切换圆点特效

多种圆点切换特效
  动画效果
 8816  85

为网页增加 Ajax 加载特效

使用 Ajax 加载页面时不希望用户看到 DOM Change 的过程,在部分机子上你会觉得页面“闪”了一下,所以就需要一个炫酷吊炸天的动画来掩盖它。
  动画效果
 10086  28

超炫的动态打字效果

文字动态输出,可以各种显示方式,简单好看
  动画效果
 8486  88

ripplebuttons.js水波效应的独立库

ripplebuttons.js是用于网站添加水波动画的一个轻量级独立库。
  动画效果
 12903  33

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复
    PROMULGATOR

    醉氧白沙

    上海市