推荐一个常用的数字滚动动画插件,jquery.counterup.js 该插件可以控制动画的延迟时间和动画过渡时间。但它依赖于Waypoints.js插件来监听滚动事件。
从而实现页面滚动到数字可视窗口,实现让数字从零到指定数值的滚动。

使用方式

  1. 首先引入jQuery.js
  2. 引入 jquery.waypoints.js (点击下载)监听页面滚动事件
  3. 引入jquery.counterup.js (点击下载)数字动画插件
  4. 在需要的滚动的数字上添加class类名counter作为数字的容器
  5. 在页面添加js代码,$('.counter').countUp();
    就这个样就可以实现数字从零到指定数值了,话不多说上代码~
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.waypoints.min.js"></script>
<script src="./js/jquery.countup.min.js"></script>
<style>
    .content{
        display: flex; justify-content: space-between; align-items: center;
        padding: 100px;
        margin: auto;
        height: 200vh;
    }
    span{
        font-size: 40px;
    }
</style>
<div class="content">
    <span class="counter">20</span>
    <span class="counter">100</span>
    <span class="counter">500</span>
</div>
<script>
    $('.counter').countUp();
</script>

进阶用法

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

<div class="content">
    <span class="counter" data-counter-time="5000" data-counter-delay="50">20</span>
    <span class="counter" data-counter-time="5000" data-counter-delay="60">100</span>
    <span class="counter" data-counter-time="5000" data-counter-delay="10">500</span>
</div>
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐