スクロールでjQueryナンバーカウンターを実行

Question

jQueryナンバーカウンターは素晴らしいですが、ページが読み込まれるとすぐに実行されます。私がしようとしているのは、要素が見えるようになると、その要素を実行させる方法を考え出すことです。これは私の現在のマークアップ

EDIT

は、ウェイポイントを使用して所望の効果を手に入れています。

$('#counter').waypoint(function (direction) { 
 
    $('.count').each(function() { 
 
     var $this = $(this); 
 
     jQuery({ 
 
     Counter: 0 
 
     }).animate({ 
 
     Counter: $this.text() 
 
     }, { 
 
     duration: 2000, 
 
     easing: 'swing', 
 
     step: function() { 
 
      $this.text(Math.ceil(this.Counter)); 
 
     } 
 
     }); 
 
    }); 
 
    }, { 
 
    offset: '80%' 
 
    });

#counter { 
 
     position: relative; 
 
     color: #fff; 
 
     margin-top: 600px; 
 
    } 
 
    
 
    .counters { 
 
     padding: 100px 0; 
 
     width: 33.333%; 
 
     float: left; 
 
    } 
 
    
 
    #counter-1 { 
 
     background: #393939; 
 
    } 
 
    
 
    #counter-2 { 
 
     background: #494949; 
 
    } 
 
    
 
    #counter-3 { 
 
     background: #595959; 
 
    } 
 
    
 
    .line-numbers { 
 
     text-align: center; 
 
     display: block; 
 
     font-size: 55px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="counter"> 
 
     <div id="counter-1" class="counters"> 
 
      <span class="line-numbers count">2000</span> 
 
     </div> 
 
     <div id="counter-2" class="counters"> 
 
      <span class="line-numbers count">2500</span> 
 
     </div> 
 
     <div id="counter-3" class="counters"> 
 
      <span class="line-numbers count">150</span> 
 
     </div> 
 
     </section>

Answer 1

の下のjQueryを更新しましたあなたはthis answer

[要素が画面に表示されたときにjqueryのイベントをトリガ]の