我们在做官网或者后台首页时,经常会使用到数字滚动效果.比如让"用户数量:12800","评分:96%"这种数据,后面的数字从0开始一直变大.在以前我们也发布过一篇文章《长沙网站建设教您制作数字滚动动画》来教大家怎么实现这个效果.但这篇介绍的是使用vue来实现.对于一些不太精通vue的小伙伴来说可能不那么容易理解.

那么今天,我们将使用更加简单,更加现代的方式来完成这个效果.

首先直接展示效果:

上面的视频里展示了三条数据,每条数据中都包含了一个数字.这三个数字初始是0,进入页面就会触发Js,数字分别滚到12800、3.8、96%后停止.那这样的效果要怎么实现呢?

我们先来看代码图:

Html代码非常简洁,只有3个div.每一个div都附加了几条数据:"data-to"用来存放目标值,也就是12800,3.8和96."data-dur"是动画时长,从0变化到目标值所用的时间,单位为毫秒."data-dec"和"data-suffix"分别表示需要小数位的个数以及后缀,是对后两条数据的特殊设置.

接下来是关键的控制部分,我们这次是使用Js来实现数字滚动效果.核心是easeOutExpo缓动函数,这个函数的特点是:滚动初期的速度非常快,而等接近目标时速度会越来越慢,非常适合用在这种效果上.

函数核心代码:

const ease = t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);

但要注意的是,代码中的"t === 1 ? 1",这一段判断必须要加!不然的话就永远到不了"1",数字会停在12788这种尴尬的位置,一开始我们就踩过这个坑.

动画驱动就建议使用requestAnimationFrame来完成,不要用setInterval

RAF会跟着屏幕刷新率走,核心逻辑就是不断计算进度p,然后在同步在页面上进行更新.

function countUp(el) {
      const to = parseFloat(el.dataset.to);
      const dur = +el.dataset.dur || 1500;
      const dec = +(el.dataset.dec || 0);
      const suffix = el.dataset.suffix || '';
      const start = performance.now();

      (function frame(now) {
        const p = Math.min((now - start) / dur, 1);
        el.textContent = (to * ease(p)).toFixed(dec) + suffix;
        if (p < 1) requestAnimationFrame(frame);
      })(start);
    }

最后,我们不可能一进页面就让所有数字立刻滚起来,不然用户可能还没看到,数字就已经滚动完了,都不知道这里还有个效果.

所以,用IntersectionObserver来做滚动触发就非常合适.它能监控视口,当页面向下滚动到元素进入视口一半时才触发,播完就取消观察,来回滚也不会重复触发.

 const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { countUp(e.target); io.unobserve(e.target); }
      });
    }, { threshold: .5 });
    document.querySelectorAll('.num').forEach(el => io.observe(el));

和以前用的scroll事件监听相比,IntersectionObserver不需要写防抖,也不用每次滚动都去算getBoundingClientRect,性能上会好很多.

最后还有两个CSS细节要提醒一下.第一个是给数字加font-variant-numeric: tabular-nums;,让每个数字的宽度保持一致.避免在数字从0滚到12800的过程中,整行文字因为宽度变化而左右抽动,看着就很抽象.

第二个是渐变文字,用background: linear-gradient(...)加background-clip: text;和color: transparent;,数字就会有从紫到蓝的渐变色,看起来更加美观.

以上就是长沙网站建设整理出的数字滚动动画的实现方式了,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务，为您的企业的发展保驾护航！欢迎来电咨询:0731-84069615。