Author : Jhon
Publicado : 12 octubre, 2019
Para crear un contador animado jquery primero debemos de crear el html que se mostrara, basandonos en que utilizamos bootstrap para crear un contenedor escribimos el siguiente codigo :
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="counter" id="contador">
<div class="caja">
<p data-value="200">200</p>
<br>
<p>Prueba 1</p>
</div>
<div class="caja">
<p data-value="80">80</p>
<br>
<p>Prueba 2</p>
</div>
<div class="caja">
<p data-value="60">60</p>
<br>
<p>Prueba 3</p>
</div>
<div class="caja">
<p data-value="40">40</p>
<br>
<p>Prueba 4</p>
</div>
</div>
</div>
</div>
</div>
.counter p {
display: inline-block;
width: 100px;
height: 70px;
}
.counter .caja {
border: 1px solid gray;
border-radius: 6px;
display: inline-block;
}
.counter {
text-align: center;
font-size: 30px;
margin-top: 40px;
}
por ultimo y más importante viene el código jquery que hara que esto funcione:
$('.counter p').each(function() {
$(this).prop('Counter', 0).animate(Counter: $(this).data('value')
}
, {
duration: 1000,
easing: 'swing', //Esto puede ser una funcion anonima, no hace falta el (now)
step: function(now) {
//toFixed(0); esta funcion sirve para poner decimales en el numero que animamos,
//si pongo 2 en vez de 0 me imprimira 2 decimales ej: 200.00
$(this).text(this.Counter.toFixed(0));
}
}
);
});
….
Deja una respuesta