js realizes digital scrolling, how to use the plug-in jquery.counterup.min.js

Recommend a common digital scrolling animation plug-in, jquery.counterup.js This plug-in can control the animation delay time and animation transition time. But it relies on the Waypoints.js plugin to listen to scroll events.
In this way, the page scrolls to the digital visual window, and the scrolling of the number from zero to the specified value is realized.

How to use

1. First introduce jQuery.js
2. Introduce jquery.waypoints.js (click to download) to monitor page scrolling events
3. Introduce jquery.counterup.js (click to download) digital animation plug-in
4. counterAdd the class class name as the container of the number on the scrolling number that needs to be scrolled
5. Add js code on the page, $('.counter').countUp();
   just like this, you can realize the number from zero to the specified value, let’s not talk about the code~

<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>

Advanced usage

You can also use data-counter-timethe and data-counter-delayproperties to set the animation time and delay time for digital animation

<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>