数字滚动效果

<div style="height: 100vh;background:#6567d3;display: flex;align-items: center;justify-content: center;" class="index-number-scrolling">
    <div class="round-log" >800</div>--
    <div class="round-log">1200</div>--
    <div class="round-log">1500</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
    let observerNumber = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 获取目标元素的数值
                let targetValueNumber = parseInt(entry.target.textContent);
                console.log(targetValueNumber)
                // 执行动画
                anime({
                    targets: entry.target,
                    innerHTML: [0, targetValueNumber],
                    easing: 'linear',
                    round: 10,
                    update: function(anim) {
                        entry.target.innerHTML = Math.round(anim.animations[0].currentValue);
                    }
                });
                
                // 停止观察当前目标
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.8 });

    // 选择所有 .round-log 元素并进行观察
    document.querySelectorAll('.index-number-scrolling .round-log').forEach(element => {
        observerNumber.observe(element);
    });
</script>