Saltar al contenido

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

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

Te puede interesar:   5 animaciones de carga CSS

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.

Te puede interesar:   Tutorial Particles.js - Crear efecto de Part铆culas con Javascript

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.

Sigue aprendiendo con nosotros:

Sistema de ventas java
Xampp o Wamp
JavaScript detectar m贸vil
Dise帽o de tablas en HTML y css
0/5 (0 Reviews)
Comparte