Estoy haciendo un contador de números con jQuery, hasta ahí todo bien. El problema está en que solo quiero que se ejecute cuando llegues a la sección, porque si no, cuando bajas y llegas ya se ha completado la función. Lo he intentado con el delay
pero lo único que he conseguido es darle unos segundos de margen.
Éste es el código que tengo (en Codepen):
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 8000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
body {
background-color: #F46A6A;
color: #fff;
max-width: 800px;
margin: 100px auto 0;
text-align: center;
display: table;
}
.counter {
display: table-cell;
margin: 1.5%;
font-size: 50px;
background-color: #FF6F6F;
width: 200px;
border-radius: 50%;
height: 200px;
vertical-align: middle;
}
p {
text-align: center;
margin-bottom: 150%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="texto">
<p>baja</p><br>
<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="2200">0</div>
</div>