スクロールのセクションに到達するとカウンターが再生されます

Question

次のスクリプトでいくつかの統計がカウントされ、スクロールがセクションに到達したときに再生する方法を知りたいと思います。

私がスクリプトから見たのは、スクリプトがページを読み込んだときに自動再生すると思います。

多分私はスクリプトを変更する必要がありますが、私はあなたのスクリプトを知っているなら、私に教えてくださいこれについては別のスクリプトが見つかりませんでした。

\t (function($) { 
 
\t \t "use strict"; 
 
\t \t function count($this){ 
 
\t \t var current = parseInt($this.html(), 10); 
 
\t \t current = current + 1; /* Where 50 is increment */ \t 
 
\t \t $this.html(++current); 
 
\t \t \t if(current > $this.data('count')){ 
 
\t \t \t \t $this.html($this.data('count')); 
 
\t \t \t } else {  
 
\t \t \t \t setTimeout(function(){count($this)}, 50); 
 
\t \t \t } 
 
\t \t }   \t 
 
\t \t $(".stat-count").each(function() { 
 
\t \t $(this).data('count', parseInt($(this).html(), 10)); 
 
\t \t $(this).html('0'); 
 
\t \t count($(this)); 
 
\t \t }); 
 
    })(jQuery);

.stat { 
 
    margin:150px auto; 
 
    text-align:center; 
 
} 
 
.highlight { 
 
    color:#111; 
 
    padding:20px 0; 
 
    font-weight:bold; 
 
    display:block; 
 
    overflow:hidden; 
 
    margin-bottom:0; 
 
    font-size:48px; 
 
} 
 
.stat i { 
 
\t color:#f7c221; 
 
} 
 
.milestone-details { 
 
    font-weight:bold; 
 
    font-size:18px; 
 
    color:#999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t \t <div class="stat"> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-user fa-3x"></i> 
 
        <span class="stat-count highlight">122</span> 
 
        <div class="milestone-details">Happy Customers</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-coffee fa-3x"></i> 
 
        <span class="stat-count highlight">4226</span> 
 
        <div class="milestone-details">Ordered Coffee's</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-trophy fa-3x"></i> 
 
        <span class="stat-count highlight">14</span> 
 
        <div class="milestone-details">Awards Win</div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
       <div class="milestone-counter"> 
 
        <i class="fa fa-camera fa-3x"></i> 
 
        <span class="stat-count highlight">232</span> 
 
        <div class="milestone-details">Photos Taken</div> 
 
       </div> 
 
      </div> 
 
\t \t </div><!-- stat --> 
 
\t </div>

Answer 1

jQuery InViewプラグインを使用してください。

$('.milestone-counter').on('inview', function(event, isInView) { 
    if (isInView) { 
    count($(this)); 
    } 
});