Comparsa allo scroll, una barra di avanzamento della lettura, parallax e una storia sticky, ognuno realizzato in tre modi: animazioni CSS scroll-driven, IntersectionObserver e GSAP ScrollTrigger.
Le animazioni allo scroll riproducono effetti quando i contenuti entrano nella visuale o mentre la pagina scorre. Il CSS moderno collega i keyframe allo scorrimento con animation-timeline: view() o scroll(), senza bisogno di script dove è supportato. IntersectionObserver in JavaScript attiva classi di comparsa ovunque, e GSAP ScrollTrigger gestisce il pinning e le timeline legate allo scroll. Rispetta sempre prefers-reduced-motion.
Scegli un approccio
I quattro effetti più richiesti, comparsa allo scroll, barra di avanzamento della lettura, parallax e storia sticky, sono mostrati ciascuno in puro CSS, in JavaScript semplice con IntersectionObserver e con GSAP ScrollTrigger. Le versioni CSS girano dal vivo in riquadri scorrevoli, e la versione con observer funziona come demo direttamente in questa pagina.
Lega l'avanzamento di un'animazione allo scorrimento invece che al tempo. scroll() segue quanto è stato scorso un contenitore, dall'alto in basso. view() segue il percorso di un singolo elemento attraverso l'area visibile, quindi i keyframe vengono eseguiti mentre entra ed esce.
Chrome ed Edge dalla versione 115, e Safari dalla versione 26. In Firefox la funzionalità è rimasta dietro un'impostazione invece di essere attiva per default, quindi controlla caniuse prima di farci affidamento e prevedi sempre un fallback.
Per sapere quando un elemento entra o esce dalla visuale, sì. Il browser calcola le intersezioni in modo asincrono e ti chiama solo quando cambiano, mentre un listener sullo scroll viene eseguito molte volte al secondo e ti spinge a letture del layout che causano scatti.
Non per semplici comparse o una barra di avanzamento. GSAP ScrollTrigger si guadagna il suo posto per sezioni fissate, timeline in più passaggi legate allo scroll, snapping ed effetti che devono comportarsi allo stesso modo in ogni browser oggi.
Dentro una media query prefers-reduced-motion: reduce, mostra i contenuti nel loro stato finale ed elimina parallax e movimenti ampi. In JavaScript, controlla la stessa query con window.matchMedia prima di creare le animazioni. Le dissolvenze di opacità leggere di solito sono accettabili.
Ogni riquadro scorre per conto suo. In un browser senza animation-timeline, la protezione @supports lascia tutto visibile e fermo.
Ogni card appare in dissolvenza e sale mentre entra nel viewport. animation-range limita l'effetto alla fase di entrata.
scroll(root) segue lo scorrimento del documento. La barra passa da 0 alla larghezza piena senza alcun listener.
Il livello interno si muove più lentamente della pagina mentre il suo contenitore attraversa il viewport. Disattivato con il movimento ridotto.
L'immagine resta fissata con position: sticky mentre ogni passaggio si illumina quando attraversa il centro del riquadro.
La demo dal vivo in cima a questa pagina esegue lo stesso schema in React. Queste versioni funzionano con qualsiasi framework o senza.
Le card partono nascoste solo quando lo script è stato eseguito, aggiungendo prima una classe a html, così uno script fallito le lascia visibili.
L'avanzamento richiede la posizione di scroll esatta, quindi questa versione usa un listener scroll passivo limitato a un frame.
Una sottile fascia di osservazione al centro dello schermo segna come attivo il passaggio che la sta attraversando.
Solo codice. ScrollTrigger è un plugin di GSAP; entrambi sono gratuiti secondo la licenza di GSAP, che dovresti leggere prima di pubblicare.
gsap.matchMedia esegue la configurazione solo quando chi legge non ha chiesto il movimento ridotto, e la annulla se l'impostazione cambia.
Scorri dentro il riquadro. Le card compaiono una volta, la barra segue l'avanzamento, il livello a strisce si muove più lentamente dei contenuti e il pannello fissato segue il passaggio che attraversa il centro.
Il movimento ridotto è attivo, quindi le card compaiono senza movimento e il parallax è disattivato.
Avanzamento dello scroll nella demo
Area demo scorrevole
Inizia a scorrere.
Livello parallax
Inizia gratis · Nessuna carta di credito richiesta