Animazioni Scroll con JavaScript: Guida Pratica

Animazioni Scroll-Based: Guida Pratica con JavaScript Questa guida illustra come implementare animazioni basate sullo scroll utilizzando JavaScript e CSS, focalizzandosi sull'apparizione di elementi quando diventano visibili all'utente. L'ambiente di sviluppo è un browser web moderno con accesso a JavaScript. ## Requisiti Conoscenza base di HTML, CSS e JavaScript.

Un editor di codice (es. Visual Studio Code, Sublime Text). Un browser web moderno (es. Chrome, Firefox, Safari). ## Fase 1: Preparazione degli Elementi Animabili ### 1. Definizione delle Classi CSS Aggiungi la classe CSS `.animabile` agli elementi che desideri animare. Questa classe inizialmente nasconde l'elemento. css .animabile { opacity: 0; transform: translateY(50px); } Aggiungi la classe CSS `.animabile.visibile` per definire lo stato visibile dell'elemento. css .animabile.visibile { opacity: 1; transform: translateY(0); } ### 2. Creazione di Elementi di Esempio Crea un menu di navigazione di esempio. Definisci la classe CSS per lo stato attivo dei link nel menu. css

menu a.active { color: #ff5722; font-weight: bold;

} Crea delle sezioni di contenuto.

Sezione 1

Contenuto della sezione 1.

Aggiungi la classe `parallasse` agli elementi che devono avere un effetto parallasse. css .parallasse { position: relative; transition: transform 0.2s ease-out; } ## Fase 2: Implementazione della Logica JavaScript ### 1. Selezione degli Elementi Animabili Seleziona tutti gli elementi con la classe "animabile". javascript const elementiAnimabili = document.querySelectorAll(".animabile"); ### 2. Definizione della Funzione di Controllo Visibilità Definisci la funzione `controlloVisibilita` per verificare la visibilità degli elementi. javascript function controlloVisibilita() { elementiAnimabili.forEach(elemento => { const distanzaDallaBase = window.innerHeight 0.85; if (window.scrollY + window.innerHeight > elemento.offsetTop + distanzaDallaBase) { elemento.classList.add("visibile"); } }); } ### 3. Aggiunta di Listener per Eventi Aggiungi un listener per l'evento "scroll" alla finestra. javascript window.addEventListener("scroll", controlloVisibilita); Aggiungi un listener per l'evento "load" alla finestra. javascript window.addEventListener("load", controlloVisibilita); ### 4. Gestione del Menu di Navigazione Seleziona tutti gli elementi section. javascript const sezioni = document.querySelectorAll("section"); Seleziona tutti i link nel menu. javascript const linkMenu = document.querySelectorAll("#menu a"); Itera sui link del menu e aggiungi un listener per l'evento click. Questo listener gestisce l'attivazione del link corrente. javascript linkMenu.forEach(link => { link.addEventListener("click", function() { // Rimuovi la classe 'active' da tutti i link linkMenu.forEach(l => l.classList.remove("active")); // Aggiungi la classe 'active' al link corrente this.classList.add("active"); }); }); ### 5. Implementazione dell'Effetto Parallasse Seleziona tutti gli elementi con la classe "parallasse". javascript const elementiParallasse = document.querySelectorAll(".parallasse"); ## Risultato Atteso Gli elementi con la classe `.animabile` saranno inizialmente nascosti. Quando l'utente scorre la pagina e l'elemento diventa visibile (85% dell'altezza della finestra), la classe `.visibile` viene aggiunta, rendendolo visibile. I link del menu cambieranno colore e diventeranno in grassetto quando vengono cliccati. Gli elementi con la classe `.parallasse` avranno un effetto di parallasse durante lo scroll. ## Troubleshooting Gli elementi non si animano: Verifica che la classe `.animabile` sia presente negli elementi che devono essere animati e che la funzione `controlloVisibilita` sia correttamente collegata agli eventi "scroll" e "load". Controlla anche che `elemento.offsetTop` sia corretto. Gli elementi si animano troppo presto o troppo tardi: Modifica il valore `window.innerHeight 0.85` per regolare il trigger point della visibilità. Il menu non funziona correttamente: Verifica che i selettori CSS `#menu a` siano corretti e che la logica di gestione della classe `active` sia implementata correttamente.

Effetto parallasse assente: Assicurati che la classe `.parallasse` sia applicata agli elementi desiderati e che il browser supporti le trasformazioni CSS.