Estaba tratando de encontrar una manera de iniciar una animación solo si el usuario está en ella, al principio intenté obtener el tamaño de la pantalla y funciona, pero no es una solución óptima. Una vez que estaba buscando en Google, encontré algo donde podíamos obtener una identificación (mediante la etiqueta de identificación) mientras nos desplazamos, si de alguna manera pudiera obtener la identificación mientras me desplazaba hacia abajo, podría usar una función de JavaScript simple para reproducir la animación. ¿hay alguna manera?
Está bien, lo encontré por mi cuenta. ¿Qué estaba tratando de hacer? Quería iniciar una animación (barra de habilidades) solo cuando el usuario la está viendo/en ella/ha pasado información previa. Hice esto usando la sección, JavaScript y luego activé la animación cuando el usuario está en ella.
UN EJEMPLO (Lo siento por el código desordenado, no sé alinear el código aquí)
<section id="name"> <div class="hello"> <h1>Hello world</h1> </div> </section> <section id="aboutMe"> <div class="hello"> <h1>Hello world</h1> </div> </section> <section id="skills"> <div class="hello"> <h1>these are my skills</h1> </div> </section>JAVASCRIPT:
var element = document.querySelector("#skills"); function isInViewPort(element) { // Get the bounding client rectangle position in the viewport var bounding = element.getBoundingClientRect(); // Checking part. Here the code checks if it's *fully* visible // Edit this part if you just want a partial visibility if ( bounding.top >= 0 && bounding.left >= 0 && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) ) { return true; } else { return false; } } var element = document.querySelector("#skills"); if (isInViewPort(element)) { alert('true') }espero que esto ayude a alguien en el futuro