Tengo una función breve de javascript que aplica una clase de animación a un div cuando se "desplaza" a la vista. Esto funciona muy bien para un div con estas clases. Pero, ¿cómo aplico esto a múltiples elementos con estas clases? Tengo varios elementos de .square y .square-wrapper en la página, y quiero que cada uno se anime cuando el usuario se desplaza cerca de él. Aquí está la función que solo aplica .square-animate al primer elemento:
<script> const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const square = entry.target.querySelector('.square'); if (entry.isIntersecting) { square.classList.add('square-animation'); return; // if we added the class, exit the function } // We're not intersecting, so remove the class! square.classList.remove('square-animation'); }); }); observer.observe(document.querySelector('.square-wrapper')); </script>La parte HTML se parece a esto:
<div class="container row square-wrapper"> <div class="col s12 m4 square"> // some content here </div> </div> <div class="container row square-wrapper"> <div class="col s12 m4 square"> // some content here </div> </div> <div class="container row square-wrapper"> <div class="col s12 m4 square"> // some content here </div> </div>No sé si hay una solución más inteligente. En esta mina, llamo a observar en cada elemento de destino que desea observar. Las diversas llamadas no anulan a la anterior, pero escuchan todas.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .square-animation { animation: coloraGraduale 2s forwards; } @keyframes coloraGraduale { from { background-color: white; } to { background-color: red; } } </style> </head> <body> <div style="height: 1000px"></div> <div class="container row square-wrapper"> <div class="col s12 m4 square"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis fuga dolore impedit architecto cupiditate dignissimos rerum ut deleniti. Laudantium harum expedita a. Eius velit dolorum laborum modi quidem voluptate ullam! </p> </div> </div> <div class="container row square-wrapper"> <div class="col s12 m4 square"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis fuga dolore impedit architecto cupiditate dignissimos rerum ut deleniti. Laudantium harum expedita a. Eius velit dolorum laborum modi quidem voluptate ullam! </p> </div> </div> <div class="container row square-wrapper"> <div class="col s12 m4 square"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis fuga dolore impedit architecto cupiditate dignissimos rerum ut deleniti. Laudantium harum expedita a. Eius velit dolorum laborum modi quidem voluptate ullam! </p> </div> </div> <script> const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const square = entry.target.querySelector(".square"); if (entry.isIntersecting) { square.classList.add("square-animation"); return; // if we added the class, exit the function } // We're not intersecting, so remove the class! square.classList.remove("square-animation"); }); }); let elements = document.querySelectorAll(".square-wrapper"); for (let element of elements) { observer.observe(element); } </script> </body> </html>