Count Up Start automatisch

Question

Wie setze ich Count up nicht automatisch laufen? ich möchte, dass bis machen zählen nur starten, wenn ich auf das Scrollen

HTML-Code:

<!-- 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-Code: `

$('.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'); 
    } 
    }); 
}); 

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

testen