0

quiero saber cómo puedo hacer que un contador hecho en JavaScript funcione apenas se muestra la sección donde está el mismo, es decir, el contador empieza a andar de 0 a el numero tal que se asigne apenas se carga la página, no cuando se llega a la sección, adjunto código JavaScript:

let cont1=document.getElementById('cont1'),
    cont2=document.getElementById('cont2'),
    cont3=document.getElementById('cont3'),
    cont4=document.getElementById('cont4')
let c1=0, c2=0, c3=0, c4=0
tiem=35
let tiempo1= setInterval(() => {
    cont1.textContent=c1+=1

    if(c1===97)
    {
        clearInterval(tiempo1)
    }
}, '${tiem}')
let tiempo2= setInterval(() => {
    cont2.textContent=c2+=1

    if(c2===97)
    {
        clearInterval(tiempo2)
    }
}, '${tiem}')
let tiempo3= setInterval(() => {
    cont3.textContent=c3+=1

    if(c3===12)
    {
        clearInterval(tiempo3)
    }
}, '${tiem}')
let tiempo4= setInterval(() => {
    cont4.textContent=c4+=1

    if(c4===135)
    {
        clearInterval(tiempo4)
    }
}, '${tiem}')
4
  • Probaste usando el evento "load"?(document.addEventListener("load", tufuncion))
    – Dante S.
    Commented el 21 feb. a las 21:08
  • Soy bastente nuevo en javascript, entonces no se como deberia poner el evento, me puedes indicar como se haria, por favor? Commented el 21 feb. a las 21:35
  • Quieres que cada contador empiece en 0 y termine que dependiendo de cada contador se detenga ya sea en 97, 97, 12 y 135?
    – DevArthur
    Commented el 21 feb. a las 21:57
  • Si ese código se ejecuta cuando carga la página claramente va a suceder eso. Necesitas determinar si el elemento es visible en pantalla luego de de scrollear. Hay un evento (scroll) que puedes usar para llevar a cabo la verificación cada vez que se scrollee.
    – Mateo
    Commented el 21 feb. a las 21:58

1 respuesta 1

2

Puedes hacer un contador solo con CSS

Ejemplo:

@property --contador {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --contarhasta {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.contador {
  --contarhasta: 0;
  animation: counter 3s ease-in-out;
  animation-fill-mode: forwards;
  font-size: 4em;
  animation-play-state: paused;
  counter-reset: num var(--contador);
}
.contador-start{
  animation-play-state: running;
}
.contador::before {
  content: counter(num);
}

@keyframes counter {
  from {
    --contador: 0;
  }
  to {
    --contador: var(--contarhasta);
  }
}
<div class="contador contador-start" style="--contarhasta:98"></div>

<!-- No inicia, porque no tiene la clase "contador-start" -->
<div class="contador" style="--contarhasta:98"></div>

Se crean 2 propiedades personalizadas:

  • --contador: Es el número que va cambiando, en un momento dado puede ser 12 y luego 22
  • --contarhasta: Es el número hasta donde se quiere llegar, siempre es fijo

Además añadí una clase contador-start, la cual cuando está presente da inicio al contador (será útil para la próxima parte)


Luego para detectar un elemento HTML está en el espacio del viewport, es decir que está visible y no oculto en el scroll, se utiliza IntersectionObserver

Demo:

//Este evento se ejecuta cuando se ha cargado el DOM
document.addEventListener('DOMContentLoaded', (event) => {
  const observer = new IntersectionObserver(entries => {

    entries.forEach(entry => {
      if (entry.isIntersecting ) {
        entry.target.classList.add('contador-start');
      }
    });
  },{ threshold: 1});

  // threshold = 1 -> La animación comienza cuando el contador se ve complento
  // threshold = 0.5 -> La animación comienza cuando el contador se ve la primera mitad
  // threshold = 0.1 -> La animación comienza cuando el contador se ve un 10%
  //Es decir toma valores entre 0 y 1

  document.querySelectorAll('.contador').forEach(e=> observer.observe(e));

});
#divgrande{
  height:120vh;
  background-color:red;
  color:white
}


@property --contador {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --contarhasta {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.contador {
  --contarhasta: 0;
  animation: counter 3s ease-in-out;
  animation-fill-mode: forwards;
  font-size: 4em;
  animation-play-state: paused;
  counter-reset: num var(--contador);
}

.contador-start {
  animation-play-state: running;
}

.contador::before {
  content: counter(num);
}

@keyframes counter {
  from {
    --contador: 0;
  }
  to {
    --contador: var(--contarhasta);
  }
}
<div id="divgrande">Este div solo es para generar scroll</div>

<div class="contador" style="--contarhasta:98"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.