Efecto contador con JavaScript y CountUp

En este artíclulo veremos como añadir un efecto contador con JavaScript y la librería CountUp. Animando valores numéricos para generar un mayor compromiso con el usuario.

https://inorganik.github.io/countUp.js/ “CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.”

See the Pen Crear contador con JavaScript y CountUp by Danivalldo (@Danivalldo) on CodePen.

¿Quieres aprender a hacer este ejercicio? Saltar directamente al tutorial

Un poco de contexto

CountUpJs fué creada por Jamie Perkins, con el objetivo de mostrar datos numéricos de una forma más interesante. Conctretamente desarrolló una librería para crear un efecto de contador numérico con JavaScript, que llamó CountUp.

Gracias a su sencilla API, se pueden realizar la animaciones de cargas numéricas. Dotando de mayor expresividad la información de valores que se muestran en el sitio web.

Actualmente ésta librería ocupa unos 5KB minificada y tiene más de 7000 estrellas en GitHub. Como es costumbre, su instalación se puede realizar cómodamente a través del comando de gestión de paquetes NPM mediante la instrucción “npm i countup.js –save”.

Perkins nos presenta CountUp a través de una simple, pero efectiva, landing page dentro de su sitio https://inorganik.net/. Allí podemos interactuar con una sencilla interfaz. Ésta nos permite modificar los distintos parámetros de inicialización de la librería, para ver el resultado en acción.

Adicionalmente, se va generando un código a tiempo real con la configuración establecida. Gracias a este pequeño snippet, podemos pegar directamente el resultado en nuestro archivo js, sin necesidad reescribir el código. Con la ventaja de que se puede empezar a intuir cómo se maneja la librería.

Sin embargo, para conocer todas las opciones que ofrece CountUp, hay que acceder a su página de Github. Se puede ver que los desarrolladores de ésta librería se han preocupado de dar soporte a otras librerías y frameworks. Algunos tan populares como Angular, React, Vue e incluso WordPress o jQuery.

¿Qué opciones ofrece su API?

La forma más simple de inicializar la CountUp, es pasando dos argumentos en el momento de instanciarla. En primer lugar, un elemento “target” que actúa de selector CSS en el DOM. Y en segundo, el valor numérico que se quiere animar.

Por supuesto, existe la posibilidad de pasar un tercer argumento opcional con los parámetros de inicialización que hemos visto en la documentación.

Entre los múltiples métodos del objeto, existe la posibilidad de llamar a algunos como “start()”, “reset()”, “pauseResume()” o “update()”.

Estos son algunos de los resultados a los que se puede llegar editando los diferentes parámetros de configuración.

«Learn by doing»

La mejor forma de aprender es haciendolo por uno mismo, así que vamos a crear un sencillo ejercicio, aprovechando CountUp.

La parte de estructura HTML sencillamente tendrá por un lado una “div” con un mensaje de despedida.

<div class="end-container">Thanks for watching</div>

Y por otro lado, un par de contenedores donde cargaremos las animaciones numéricas.

<div class="count-up-wrapper top">
      <span id="count-up-container-top">0</span>
      <span class="additional-info">Stars in Github:</span>
    </div>
    <div class="count-up-wrapper bottom">
      <span class="additional-info">Used by:</span>
      <span id="count-up-container-bottom">0</span>
    </div>

Separaremos los contenedores numéricos, y daremos estilo al mensaje de despedida con este simple código CSS.

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap");
html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: beige;
  .count-up-wrapper {
    text-align: center;
    font-size: 7rem;
    color: rgb(37, 37, 37);
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .additional-info {
      font-size: 2rem;
      position: absolute;
      top: 0;
      left: 0;
      padding: 5px 5px 5px 15px;
    }
    &.top {
    }
    &.bottom {
      background-color: rgb(37, 37, 37);
      color: beige;
    }
  }
  .end-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(37, 37, 37);
    color: beige;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-in-out;
    transform: translateY(-50px);
    &.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
    }
  }
}

Finalmente, crearemos un script. Instanciamos dos veces la clase CountUp. En cada caso, pasando como argumentos, los ids de los contenedores, el número al que tiene que llegar la animación, y un objeto de configuración.

import { CountUp } from "countup.js";
const duration = 6;
const stars = new CountUp("count-up-container-top", 7000, {
  prefix: "+ ",
  suffix: " ⭐️",
  duration,
  separator: ".",
});
const users = new CountUp("count-up-container-bottom", 15300, {
  prefix: "+ ",
  suffix: " 💻",
  duration,
  separator: ".",
});

Para cerrar la demostración, cargamos un temporizador para controlar los tiempos de inicio de cada animación.

const endContainer = document.querySelector(".end-container");
if (!stars.error && !users.error) {
  stars.start();
  window.setTimeout(() => {
    users.start(() => {
      window.setTimeout(() => {
        endContainer.classList.add("active");
      }, 1000);
    });
  }, (duration * 1000) / 3);
} else {
  console.error(stars.error, users.error);
}

Mi experiencia con CountUp

Personalmente he utilizado mucho CountUp en mis proyectos. Especialmente en el desarrollo de sitios web corporativos, donde es muy común la presentación de datos de éxitos relativos a la empresa. Mostrar dichos datos en una progresión animada ascendente, genera en el usuario una sensación de mayor valor de forma inconsciente.

Por ese motivo, creo que CountUp es una excelente microlibrería. Ya que con muy poco impacto en nuestro proyecto, podemos incluir un efecto que potencia el marketing y agrega dinamismo a nuestro sitio web.

Por cierto, y si te interesan librerías efectistas como esta, te sugiero que te pases por los artículos de CanvasConfetti y Atropos.

Este ha sido un pequeño vistazo a la librería CountUp. A continuación os dejo enlaces a más recursos, así como el ejercicio subido al repositorio de Github de “Librerías Js”.

Nos vemos pronto, un abrazo desarrolladores!

2 comentarios en «Efecto contador con JavaScript y CountUp»

Deja un comentario