Saltar al contenido

Tutorial CountUp.js | Animaci贸n de Conteo con Javascript

Valora este articulo.

En esta publicaci贸n, te mostrar茅 c贸mo usar countUp.js.聽Una biblioteca de javascript que puede ayudarte a crear una animaci贸n de conteo de n煤meros muy f谩cilmente.聽Solo puede decirle el n煤mero inicial y final y el tiempo que debe durar la animaci贸n, y countUp.js har谩 el resto por usted.

Listo?聽隆Vamos a ver!

Preparar

Descargue la 煤ltima versi贸n de聽github聽e聽incl煤yala聽a su p谩gina usando la etiqueta de script.

<script src="countUp.js"></script>

Aqu铆 est谩 mi p谩gina HTML para este tutorial con un simple bot贸n y div.

Iniciar el contador

Para iniciar el contador, cree un objeto CountUp y pase la identificaci贸n del elemento que desea que ejecute el contador, luego siga el valor de inicio y parada.

var c = new CountUp("counter",0,4815);

Entonces llama a un m茅todo de inicio.

c.start();

y aqu铆 esta el resultado

Personalizar estilo y comportamiento

Ahora puede personalizar r谩pidamente los decimales y la duraci贸n de la animaci贸n agregando par谩metros adicionales.聽Por ejemplo, fijemos el lugar decimal en 2 y la duraci贸n en 5 segundos.聽Puede deshabilitar la animaci贸n de suavizado y la agrupaci贸n de d铆gitos agregando opciones adicionales como sigue.

var c = new CountUp("counter", 0, 4815,2,2.5,{
                    鈥冣僽seEasing: false, 
                    鈥冣僽seGrouping: false
});

Si lo desea, puede cambiar el separador de agrupaci贸n y el separador decimal.

separator: '.',
decimal: ','

y aqui esta el resultado

Tambi茅n puede agregar una funci贸n de devoluci贸n de llamada cuando la animaci贸n del contador haya finalizado.聽Por ejemplo, mostrando un cuadro de alerta.

CountUp.js tambi茅n tiene un m茅todo de control de animaci贸n donde puede pausar / reanudar / restablecer o actualizar el valor del contador.聽Echa un vistazo a la聽p谩gina de聽demostraci贸n聽, que es un buen comienzo para que puedas generarla sin tener que escribirla desde cero.

Vea este tutorial en acci贸n en este v铆deo.

As铆 que eso es todo acerca de Countup.js.聽Espero que hallas disfrutado este post.

Comparte

Loading...