Estoy tratando de agregar animaciones activadas por desplazamiento a mi sitio web de cartera en línea, y entre mis listados de experiencia tengo divs simples como separadores:
<div class='divider'></div>que estoy tratando de agregar animaciones de entrada.
Mi JS es el siguiente:
//Scroll triggered animations const obs = new IntersectionObserver(entries => { entries.foreach(entry => { console.log(entry); if(entry.isIntersecting) { entry.target.classList.add('divider-animation'); } }); }); console.log(document.querySelectorAll(".divider")); const dividerList = document.querySelectorAll(".divider"); dividerList.foreach(divider => { obs.observe(divider); }) La instrucción console.log console.log() con querySelectorAll devuelve una lista de nodos vacía aunque mis divisores se colocan directamente en el HTML, por lo que no estoy seguro de por qué mi querySelector no los reconoce.
Sospecho que JS se está ejecutando antes de que los elementos estén completamente cargados, pero no he tenido éxito con varios métodos de espera diferentes para eso.
Incluso si está colocando el script en la parte inferior, asegúrese de que se ejecute después de cargar el DOM.
Además, es forEach , no foreach.
window.addEventListener("DOMContentLoaded", function() { const obs = new IntersectionObserver(entries => { entries.forEach(entry => { console.log(entry); if (entry.isIntersecting) { entry.target.classList.add('divider-animation'); } }); }); console.log(document.querySelectorAll(".divider")); const dividerList = document.querySelectorAll(".divider"); dividerList.forEach(divider => { obs.observe(divider); }) }, false); <div class='divider'></div>