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:   Generar archivo de Texto con JS

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,{
  useEasing: false, 
  useGrouping: 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:   Decodificar Códigos QR con PHP

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