He estado tratando de animar elementos de mi página cuando están a la vista. Debo admitir que soy un principiante de Javascript y todos los fragmentos de código que encontré en Internet tampoco funcionaron. ¿Qué es exactamente lo que está mal con mi código?
Editar: acabo de notar que mi código funcionaba cuando lo agregué aquí como un fragmento. Estoy trabajando con un archivo index.html en Chrome y mi hoja de estilo definitivamente está vinculada correctamente. No puedo encontrar lo que está mal. ¿Por qué funciona aquí pero no en mi navegador? ¿Es porque olvidé agregar algo que el corredor de código de desbordamiento de pila agrega automáticamente?
const options = { root: null, rootMargin: '0px', threshold: 0.5 } let callback = (entries) => { entries.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('isVisible'); } else { entry.target.classList.remove('isVisible'); } }); } let observer = new IntersectionObserver(callback, options); document.querySelectorAll('.box') .forEach(box => { observer.observe(box) }); section { width: 100%; height: 500px; padding: 50px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } div { display: flex; justify-content: center; align-items: center; text-align: center; width: 80%; height: 80%; } .box { opacity: 0; transform: translateY(40px); transition: all 1s ease-in-out; } .box.isVisible { opacity: 1; transform: translateY(0); } <!-- ... --> <section> <div class="box"> <h2> Lorem ipsum dolor sit amed </h2> </div> </section> <section> <div class="box"> <h2> Lorem ipsum dolor sit amed </h2> </div> </section> <section> <div class="box"> <h2> Lorem ipsum dolor sit amed </h2> </div> </section> <section> <div class="box"> <h2> Lorem ipsum dolor sit amed </h2> </div> </section> <section> <div class="box"> <h2> Lorem ipsum dolor sit amed </h2> </div> </section> <!-- ... -->Entonces, según la información adicional que proporcionó, la razón por la cual el mismo código no funcionó en su máquina se debe a la ubicación de la etiqueta <script> . Cuando se coloca en el <head> del documento, el código del script se ejecuta directamente antes de que el DOM esté listo: esto significa que todos sus selectores volverán undefined en tiempo de ejecución.
Mientras tanto, en el fragmento de código utilizado en StackOverflow, cualquier JS que haya pegado se inyecta al final del elemento <body> (que sugiere una posible solución, consulte a continuación).
Hay dos formas de arreglar esto:
<script> al final del elemento <body> . De esta manera, cuando se evalúa el JS, el DOM ya se ha analizado y está listo.DOMContentLoaded