数字计数器 - 制作动画计数器 - Digit Counter - Make an animated counter

Digit Counter - Make an animated counter

本文关键字：计数器动画数字 | 更新日期: 2023-09-27

基本上，我正在寻找的是数字动画，一个很好的例子是在这个网站上：http://www.upper-reach.com/

如果您向下滚动，您将看到他们的"构建完成"等计数。

我该怎么做？

我将不胜感激答案。

你可能想研究这个问题，或者你可以使用CountUp.JS插件。

如果你想计算数字，你可以在使用CountUp时做这样的事情.JS：

var myDigit = $(".myDivWithDigits").text();
var options = {
  useEasing : true, 
  useGrouping : true, 
  separator : ',', 
  decimal : '.', 
  prefix : '', 
  suffix : '' 
};
var demo = new CountUp("myTargetElement", 0, myDigit, 0, 2.5, options);
demo.start();

<div class="vc_row wpb_row section vc_inner vc_row-fluid" style='text-align:left;'>
         <div class=" full_section_inner clearfix">
<div class="vc_col-sm-4 wpb_column vc_column_container ">
    <div class="wpb_wrapper">
        <div class="q_counter_holder  center" style=""><span class="counter  random" style="color: #bf1e2e;font-size: 50px;">254,336</span>
                        <span class="separator small" style=""></span>
                        <p class="counter_text" style="font-size: 20px;color: #000000;"></p>
</div>
    </div> 
</div>