Question

我是JS的初学者。我有动画的数字。效果很好，但我希望每次滚动页面时我的计数器都会刷新。那么小提琴：

 if ($('#animated-counter').length) {
   $('#animated-counter .count').each(function() {
     $(this).prop('Counter', 0).animate({
       Counter: $(this).text()
     }, {
       duration: 4000,
       easing: 'swing',
       step: function(now) {
         $(this).text(Math.ceil(now));
       }
     });
   });
 }

.count {
  color: #fff;
  font-size: 63px;
  font-weight: bold;
  line-height: 1.2;
  display: block;
  margin-bottom: 10px;
}
.animated-number-caption {
  color: #ffffff;
  font-size: 23px;
}
.animated-number {
  background-color: rgba(25, 29, 32, .3);
  padding: 50px 0;
  text-align: center;
}
.animated-numbers-wrap {
  background: linear-gradient(to bottom, rgba(52, 168, 23, 1) 0%, rgba(46, 133, 33, 1) 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="match" style="height:500px;"></div>
<div id="animated-counter" class="animated-numbers-wrap">
  <div class="animated-numbers">
    <div class="animated-number"><span class="count">200</span>
      <h6><span class="animated-number-caption">Projects</span></h6>
    </div>
    <div class="animated-number"><span class="count">150</span>
      <h6><span class="animated-number-caption">Projects</span></h6>
    </div>
  </div>
</div>

所以我认为，有可能进行任何刷新和航点（功能（方向）和if（方向=='向下'）......但我没有任何想法。请帮助我！

如何制作可刷新的计数器？

0 个答案: