✅Cómo Crear Métricas Animadas en Gutenberg (HTML, CSS y JS)

Hoy te traigo un snippet súper útil para añadir a tu web sin necesidad de plugins: métricas animadas o contadores que suben automáticamente al hacer scroll. Perfectos para mostrar logros, estadísticas o cifras clave en tu landing page o página corporativa.

Y como siempre, solo necesitas HTML, CSS y JavaScript dentro de un bloque HTML de Gutenberg, nada más.

¿Para qué sirve este tipo de contador?

• Mostrar números de forma impactante.
• Captar la atención del visitante.
• Transmitir confianza mostrando cifras de proyectos, clientes, experiencia, etc.

¿Qué hace este código?

• Muestra 4 métricas animadas.
• Cada número sube de 0 hasta el valor deseado al hacer scroll.
• Totalmente responsive.
• Personalizable y ligero.

Copia el siguiente código y agrégalo en un bloque de HTML de Gutenberg:

<style>
  .counters-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 80px 20px;
    background: #f9f9f9;
    flex-wrap: wrap;
  }
  .counter {
    text-align: center;
    margin: 20px;
  }
  .counter h2 {
    font-size: 3rem;
    color: #13b0a0;
    margin-bottom: 10px;
  }
  .counter p {
    font-size: 1.1rem;
    color: #333;
  }
</style>

<div class="counters-section">
  <div class="counter">
    <h2 data-target="120">0</h2>
    <p>Proyectos completados</p>
  </div>
  <div class="counter">
    <h2 data-target="85">0</h2>
    <p>Clientes satisfechos</p>
  </div>
  <div class="counter">
    <h2 data-target="10">0</h2>
    <p>Años de experiencia</p>
  </div>
  <div class="counter">
    <h2 data-target="500">0</h2>
    <p>Tazas de café consumidas</p>
  </div>
</div>

<script>
  const counters = document.querySelectorAll('.counter h2');
  let activated = false;

  function animateCounters() {
    if (activated) return;
    if (window.scrollY + window.innerHeight > document.querySelector('.counters-section').offsetTop) {
      counters.forEach(counter => {
        const target = +counter.getAttribute('data-target');
        let count = 0;
        const increment = target / 100;
        const update = () => {
          count += increment;
          if (count < target) {
            counter.innerText = Math.ceil(count);
            requestAnimationFrame(update);
          } else {
            counter.innerText = target;
          }
        };
        update();
      });
      activated = true;
    }
  }

  window.addEventListener('scroll', animateCounters);
</script>

Lenguaje del código: HTML, XML (xml)

¿Cómo editar este snippet?

Cambiar los números y textos

Solo tienes que modificar estos fragmentos de código dentro de cada .counter:

<h2 data-target="120">0</h2>
<p>Proyectos completados</p>

• Cambia data-target="120" por el número final que quieres.
• Edita el texto de la <p> como desees.

Cambiar el estilo de los contadores

Puedes personalizar los colores y tamaños fácilmente:

.counter h2 {
  font-size: 3rem;
  color: #13b0a0;
}
.counter p {
  color: #333;
}

• Cambia el color de los números o textos a los de tu marca.
• Ajusta font-size para títulos más grandes o pequeños.

Cambiar la cantidad de métricas

• Puedes añadir más .counter duplicando las existentes.
• O reducirlas si solo necesitas 2 o 3.

Ajustar la velocidad de la animación

En el JS puedes modificar este valor para ir más lento o rápido:

const increment = target / 100;

Si pones / 200 irá más suave, si pones / 50 irá más rápido.

¿Y qué más puedo hacer?

• Añadir iconos antes del número.
• Incluir animaciones CSS al texto.
• O mostrar los contadores dentro de tarjetas más elaboradas.

Si necesitas algo más personalizado y no sabes como hacerlo, contáctame por WhatsApp y lo miramos.

Conclusión

Con este código sencillo y directo puedes tener métricas animadas totalmente personalizadas sin depender de plugins de contadores. Gutenberg + HTML es más que suficiente para darle vida a tus cifras.

Nos vemos en el siguiente tutorial. Un saludo.