数字计数器-制作动画计数器

Question

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

如果你向下滚动，你会看到他们的‘构建完成’等计数。

我该怎么做？

我很感激你的回答。

Answer 1

您可能需要查看这个问题，或者可以使用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();

Answer 2

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