Animar el cambio de un valor numérico con JavaScript

CountUp.js es una bonita biblioteca JavaScript para animar de manera sencilla el cambio de un valor numérico. Este recurso no posee dependencias, solo necesita que el navegador tenga habilitado JavaScript para funcionar.

La librería tiene un peso de casi 2kb en su versión simplificada, valor que se reducirá considerablemente al aplicarle una compresión gzip. Un peso muy apropiado si tenemos en cuenta que la funcionalidad es puramente estética.

CountUp.js se puede instalar directamente bajando la biblioteca desde su apartado en Github o bien utilizando Bower tratando al proyecto como un componente.

Para entender más acerca de este proyecto les recomiendo visitar la demostración online disponible desde el sitio oficial del recurso.

Su instalación es de lo más simple, si no queremos utilizar Bower y buscamos realizar una implementación 100% manual simplemente debemos incorporar la biblioteca a nuestro proyecto, luego inicializamos el objeto:

var numAnim = new countUp("SomeElementYouWantToAnimate", startVal, endVal, 
decimals, duration)

Por último iniciamos la animación, para ello una simple linea alcanza y sobra.

numAnim.start()

Web: CountUp.js

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas