Parallax scrolling in puro CSS: perspective e animazioni guidate dallo scroll
Crea il parallax con CSS perspective e translateZ, oppure con le animazioni guidate dallo scroll, guarda dal vivo il calcolo della profondità e gestisci correttamente telefoni e movimento ridotto.
Il parallax in puro CSS ha due metodi affidabili. Il metodo perspective crea un contenitore di scroll con perspective e spinge indietro i livelli di sfondo con translateZ, poi li ingrandisce di (perspective meno z) diviso perspective. Il metodo più recente lega un'animazione translate ad animation-timeline: view(). Entrambi dovrebbero disattivarsi con prefers-reduced-motion.
Tre modi per ottenere un effetto parallax
Metodo
Come si muove
Attenzione a
perspective + translateZ
I livelli più profondi scorrono più lentamente dentro un contenitore di scroll 3D
Richiede un contenitore di scroll dedicato, non la pagina
animation-timeline: view()
Un translate in keyframe segue l'elemento attraverso il viewport
Chrome ed Edge 115+, Safari 26+, Firefox 161+
background-attachment: fixed
Lo sfondo resta fermo mentre il contenuto gli scorre sopra
Supporto parziale su iOS Safari; scatta su molti telefoni
Fallback JavaScript
La posizione di scroll imposta un transform a ogni frame
Usa requestAnimationFrame e un listener passive
La maggior parte dei tutorial sul parallax si ferma a background-attachment: fixed, che gli iPhone supportano solo in parte. Questa guida mostra i due metodi che animano davvero i livelli, spiega il calcolo della scala perché i livelli non si rimpiccioliscano e fornisce un piccolo script di fallback più la gestione del movimento ridotto, così l'effetto non fa venire la nausea a nessuno.
Sposta il cursore della profondità nel playground per spingere più indietro il livello di sfondo.
Scorri l'anteprima e confronta la velocità del livello posteriore con quella del testo in primo piano.
Leggi la scala e la velocità calcolate, che sono i valori usati dal CSS qui sotto.
Copia il metodo adatto: perspective per un hero contenuto, view() per le sezioni di una pagina normale.
Un livello a translateZ(z) con perspective p si muove a p diviso (p meno z) della velocità di scroll.
Imposta overflow-x: hidden sul contenitore del parallax, perché i livelli scalati sono più larghi del loro box.
Dichiara animation-timeline dopo la shorthand animation, perché la shorthand la reimposta ad auto.
Racchiudi il movimento in @media (prefers-reduced-motion: no-preference) così l'effetto è attivo solo su consenso implicito.
Domande frequenti
Perché il mio livello con translateZ sembra più piccolo?
Allontanare un elemento da chi guarda con un translateZ negativo lo rimpicciolisce, proprio come un oggetto distante. Aggiungi scale((p - z) / p) per ripristinarne la dimensione. Con perspective: 1px e translateZ(-2px), si ottiene scale(3).
background-attachment: fixed funziona su mobile?
Non in modo affidabile. caniuse indica solo un supporto parziale in iOS Safari e nota che la maggior parte dei dispositivi mobili aggiorna lentamente uno sfondo fisso dopo lo scroll. Consideralo un dettaglio solo desktop e usa uno dei metodi con transform quando l'effetto conta.
Il parallax è un problema per l'accessibilità?
Movimenti ampi legati allo scroll possono causare vertigini o nausea nelle persone con disturbi vestibolari. Rispetta l'impostazione di riduzione del movimento del sistema operativo con la media query prefers-reduced-motion e mostra i livelli statici quando è attiva.
Quali browser supportano il parallax guidato dallo scroll?
A ottobre 2026, caniuse indica animation-timeline in Chrome ed Edge dalla 115, Safari dalla 26 e Firefox dalla 161. I browser più vecchi semplicemente saltano l'animazione, quindi la pagina si legge correttamente anche senza l'effetto.
Come funziona il metodo perspective
Il contenitore diventa l'elemento che scorre e riceve un valore di perspective. I suoi figli mantengono la posizione 3D con transform-style: preserve-3d. Quando il contenitore scorre, un livello più indietro sull'asse z percorre meno distanza sullo schermo di uno a z uguale a zero, quindi sembra restare indietro.
Poiché perspective su un elemento crea anche un contesto di sovrapposizione e un blocco contenitore per i figli fixed, mantieni il wrapper del parallax autonomo. Le intestazioni che devono restare fisse rispetto alla finestra vanno messe fuori.
Telefoni e browser più vecchi
L'articolo di Chrome sul parallax performante osserva che lo scroll con inerzia su iOS appiattiva il contesto 3D, cosa che annullava il trucco della perspective sugli iPhone. Prova su un dispositivo reale e mantieni il contenuto leggibile quando i livelli non si muovono.
Il metodo guidato dallo scroll non ha questo problema perché gira sullo scroll normale della pagina. Dove non è supportato, i keyframe non partono mai e il livello resta nella sua posizione di riposo, che è un fallback pulito.
Metodo 1: perspective e translateZ
Hero a due livelli con il proprio contenitore di scroll
Scorri dentro il riquadro. Il livello a righe sta a translateZ(-2px) ed è scalato di 3, quindi si muove a un terzo della velocità di scroll.
Metodo 2: guidato dallo scroll con view()
Immagine che scivola mentre la sua sezione attraversa lo schermo
L'animazione parte solo dove animation-timeline è supportata e il lettore non ha chiesto un movimento ridotto.
Fallback JavaScript
Piccolo parallax con requestAnimationFrame
Si usa solo quando mancano le animazioni guidate dallo scroll. Il listener è passive e il lavoro avviene una volta per frame.
Playground della profondità
Profondità del livello posteriore (translateZ): {n}px
Scala necessaria: {v}
Velocità del livello posteriore: {v} dello scroll
Anteprima del parallax, scorri all'interno
Il testo in primo piano si muove a piena velocità
Continua a scorrere per vedere il livello posteriore restare indietro.
Il tuo dispositivo chiede un movimento ridotto, quindi l'anteprima resta ferma.