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.
Tutorial CountUp.js | Animación de Conteo con Javascript
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,{
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.
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 |