カウントアップ開始自動

Question

カウントを自動的に実行しないように設定するにはどうすればよいですか？ 私はそれをスクロールしたときだけ起動することがカウントアップしたい

htmlコード：

<!-- COUNT UP --> 
    <div id="countup" class="countup parallax-window" data-parallax="scroll" data-image-src="img/basic/background-count.jpg"><!-- start countup div--> 
     <div class="container"> 
      <div class="row"> 

       <h2>The <b>Count</b></h2> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
       <br>Lorem Ipsum has been the industry's standard</p> 

       <div class="col-sm-3 col-md-3"> 
        <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 
        <h3 class="counter" data-count="350">0</h3> 
        <h4>Project</h4> 
       </div> 

       <div class="col-sm-3 col-md-3"> 
        <i class="fa fa-coffee" aria-hidden="true"></i> 
        <h3 class="counter" data-count="755">0</h3> 
        <h4>Coffee</h4> 
       </div> 

       <div class="col-sm-3 col-md-3"> 
        <i class="fa fa-thumbs-up" aria-hidden="true"></i> 
        <h3 class="counter" data-count="2500">0</h3> 
        <h4>Smile</h4> 
       </div> 

       <div class="col-sm-3 col-md-3"> 
        <i class="fa fa-users"></i> 
        <h3 class="counter" data-count="50">0</h3> 
        <h4>Employee</h4> 
       </div> 

      </div> 
     </div> 
    </div> 
    <!-- END COUNT UP --> 

Javascriptコード： `

$('.counter').each(function() { 
    var $this = $(this), 
     countTo = $this.attr('data-count'); 

    $({ countNum: $this.text()}).animate({ 
    countNum: countTo 
    }, 

    { 

    duration: 5000, 
    easing:'linear', 
    step: function() { 
     $this.text(Math.floor(this.countNum)); 
    }, 
    complete: function() { 
     $this.text(this.countNum); 
     //alert('finished'); 
    } 
    }); 
}); 

そして、このSS：

Answer 1

$('.counter').hover(
 
function(){ 
 
var $this = $(this), 
 
     countTo = $this.attr('data-count'); 
 

 
    $({ countNum: $this.text()}).animate({ 
 
    countNum: countTo 
 
    }, 
 

 
    { 
 

 
    duration: 5000, 
 
    easing:'linear', 
 
    step: function() { 
 
     $this.text(Math.ceil(this.countNum)); 
 
    }, 
 
    complete: function() { 
 
     $this.text(this.countNum); 
 
     //alert('finished'); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="countup" class="countup parallax-window" data-parallax="scroll" data-image-src="img/basic/background-count.jpg"><!-- start countup div--> 
 
     <div class="container"> 
 
      <div class="row"> 
 

 
       <h2>The <b>Count</b></h2> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       <br>Lorem Ipsum has been the industry's standard</p> 
 

 
       <div class="col-sm-3 col-md-3"> 
 
        <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 
 
        <h3 class="counter" data-count="350">0</h3> 
 
        <h4>Project</h4> 
 
       </div> 
 

 
       <div class="col-sm-3 col-md-3"> 
 
        <i class="fa fa-coffee" aria-hidden="true"></i> 
 
        <h3 class="counter" data-count="755">0</h3> 
 
        <h4>Coffee</h4> 
 
       </div> 
 

 
       <div class="col-sm-3 col-md-3"> 
 
        <i class="fa fa-thumbs-up" aria-hidden="true"></i> 
 
        <h3 class="counter" data-count="2500">0</h3> 
 
        <h4>Smile</h4> 
 
       </div> 
 

 
       <div class="col-sm-3 col-md-3"> 
 
        <i class="fa fa-users"></i> 
 
        <h3 class="counter" data-count="50">0</h3> 
 
        <h4>Employee</h4> 
 
       </div> 
 

 
      </div> 
 
     </div> 
 
    </div>

ため、この