document.addEventListener("DOMContentLoaded", function() { // 1. Selezione elementi che hanno la classe '.motion' const targets = document.querySelectorAll('.motion'); // 2. Opzioni dell'observer (uguali per tutti) const observerOptions = { root: null, rootMargin: '0px 0px -50px 0px', threshold: 0.1 }; // 3. La callback gestisce ogni singolo elemento che entra nel viewport const observerCallback = (entries, observer) => { entries.forEach(entry => { // Se l'elemento specifico è visibile nello schermo if (entry.isIntersecting) { // Aggiungiamo la classe che fa partire l'animazione CSS entry.target.classList.add('is-visible'); // Smettiamo di osservare QUESTO specifico elemento per liberare memoria observer.unobserve(entry.target); } }); }; // 4. Istanziamo l'Observer const observer = new IntersectionObserver(observerCallback, observerOptions); // 5. Cicliamo su tutti i target trovati e li mettiamo sotto osservazione targets.forEach(target => { observer.observe(target); }); });