jquery实现企业站数字滚动增加效果

 

 html

<div class="counting">
            <div class="box">
                <h1 class="count" data-count="1200">1200+</h1>
                <h3>working hours</h3>
            </div>
            
            <div class="box">
                <h1 class="count" data-count="15">15+</h1>
                <h3>awards</h3>
            </div>
            
            <div class="box">
                <h1 class="count" data-count="100">1000+</h1>
                <h3>clients</h3>
            </div>
            
            <div class="box">
                <h1 class="count" data-count="840">840+</h1>
                <h3>projects</h3>
            </div>
        </div>

css

  .counting{
    min-height: 40vh;
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
  .counting .box{
    margin: 2rem 4rem;
    text-align: center;
}
  .counting .box .count{
    font-size:7rem;
    color: #444;
}
  .counting .box h3{
    font-size: 2rem;
    color: var(--orange);
}

jquery

$('.count').each(function(){
        var $this = $(this),
        countTo = $this.attr('data-count');
        $({countNum:$this.text()}).animate({
            countNum : countTo
        },
        {
            duration:5000,
            step:function(){
                $this.text(Math.floor(this.countNum));
            },
            complete:function(){
                $this.text(this.countNum + "+")
            }
        }
        )
    })