# Effetto parallasse: profondità nello scorrimento

[Canonical HTML page](https://gradiently.design/it/guide/parallax-effect)

La parallasse prende in prestito un trucco dei tuoi stessi occhi: le cose vicine si muovono più in fretta di quelle lontane. Usata con leggerezza dà profondità a una pagina o a un loop; esagerata dà il mal di mare. Ecco come farla bene.

## The short version

- L’effetto parallasse crea profondità muovendo i livelli a velocità diverse, con i livelli più vicini che si muovono più in fretta di quelli lontani.
- Sui siti web la parallasse nello scorrimento si può ora costruire in CSS con le animazioni guidate dallo scorrimento, senza JavaScript, nei browser che le supportano.
- La vecchia tecnica `background-attachment: fixed` viene ignorata da Safari su iOS, quindi non va usata per il mobile.
- Un movimento ampio o veloce della parallasse può dare fastidio a chi soffre di disturbi vestibolari, quindi va disattivato quando un visitatore preferisce meno movimento.
- Una parallasse sottile, con livelli che si muovono solo un poco, dà profondità senza distrarre dal contenuto.

Un **effetto parallasse** fa sembrare profondo un design piatto muovendo i suoi livelli a velocità diverse: lo sfondo scorre lentamente, il centro un po’ più in fretta e il primo piano il più veloce, proprio come le colline lontane sembrano strisciare accanto al finestrino di un treno mentre i paletti della recinzione sfrecciano. Sui siti web di solito accade mentre scorri. Nel motion design accade nel tempo, in un loop o in un video. In ogni caso la parallasse migliore è piccola, lenta e spenta per chiunque abbia chiesto al proprio dispositivo meno movimento.

## Come la parallasse crea profondità

Il cervello giudica la distanza in parte dal movimento relativo. Quando due livelli si muovono alla stessa velocità sembrano un’unica superficie piatta. Quando uno si muove più lentamente, sembra più lontano. Di solito tre livelli bastano per creare una profondità convincente.

| Livello | Velocità rispetto allo scorrimento | Cosa ci va |
| --- | --- | --- |
| Sfondo | La più lenta, circa il 10-30% dello scorrimento | Un gradiente, un cielo, una texture o un campo di colore morbido |
| Centro | Media, circa la metà | Forme, foto, illustrazioni |
| Primo piano | Velocità di scorrimento normale | Titoli, pulsanti, il contenuto vero |

Una semplice parallasse a tre livelli. Tieni il contenuto sul livello che scorre normalmente, così la lettura non ne risente mai.

> **Il testo resta fermo** Non mettere mai testo corrente o pulsanti su un livello di parallasse in movimento. Parole che scivolano a una velocità diversa da quella della pagina stancano nella lettura e sono difficili da cliccare.

## Effetto parallasse in CSS con le animazioni guidate dallo scorrimento

Il CSS moderno può legare un’animazione alla posizione di scorrimento invece che al tempo, con `animation-timeline`. Il browser la esegue fuori dal thread principale, quindi resta fluida, e non serve JavaScript. Il supporto sta ancora crescendo: funziona nei browser Chromium e nel Safari recente, quindi controlla [il supporto dei browser su MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) e tratta l’effetto come un miglioramento. Senza supporto la pagina semplicemente non si muove, ed è accettabile.

```css
.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;          /* keeps the layer inside the hero */
  min-height: 80vh;
  view-timeline: --hero block;
}

.hero__bg {
  position: absolute;
  inset: -15% 0;               /* extra room so edges never show */
  background:
    radial-gradient(circle at 75% 20%, #7c3aed 0%, transparent 45%),
    linear-gradient(170deg, #0f0b1e 0%, #1e1b4b 100%);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg {
      animation: hero-depth linear both;
      animation-timeline: --hero;
    }
  }
}

@keyframes hero-depth {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}
```

Il livello di sfondo si muove un poco mentre l’hero attraversa il viewport. Funziona solo dove è supportato e dove il visitatore non ha chiesto meno movimento.

L’entità del movimento sta nei keyframe: il 10% per parte è dolce. Spingilo oltre il 20% e l’effetto comincia a sembrare una giostra. Muovere `transform` invece di `top` o `background-position` lo rende poco costoso da disegnare per il browser. [Le prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance) spiega perché i grandi gradienti animati devono muoversi, non ridisegnarsi.

## Altri modi di costruire la parallasse nello scorrimento

| Metodo | Come funziona | Attenzione a |
| --- | --- | --- |
| Animazioni guidate dallo scorrimento | `animation-timeline: view()` o `scroll()` lega i keyframe allo scorrimento | Non ancora in ogni browser; costruiscila come miglioramento |
| `background-attachment: fixed` | Lo sfondo resta fermo mentre il contenuto ci scorre sopra | Ignorato da Safari su iOS; una sola velocità fissa |
| Prospettiva 3D in CSS | I livelli spinti indietro con `translateZ` scorrono più lentamente | Scalatura e impostazione del contenitore di scorrimento delicate |
| JavaScript sullo scorrimento | Uno script muove i livelli mentre la pagina scorre | Può scattare se gira a ogni evento di scorrimento; usa `requestAnimationFrame` |

Quattro tecniche. Per un sito nuovo, le animazioni guidate dallo scorrimento sono la scelta più pulita.

## Parallasse e movimento ridotto

Per chi soffre di disturbi vestibolari, un movimento ampio innescato dallo scorrimento può causare vertigini e nausea. Le indicazioni WCAG sull’[animazione da interazioni](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) chiedono che un movimento simile si possa disattivare. Il modo più semplice di rispettarlo è racchiudere la parallasse in `prefers-reduced-motion: no-preference`, come nel codice qui sopra, così gira solo per i visitatori che non hanno chiesto meno movimento. [Prefers reduced motion](https://gradiently.design/it/guide/reduced-motion) tratta la media query e come provarla.

### Evita

- Intere sezioni che scivolano a velocità diverse
- Testo o pulsanti su livelli in movimento
- Movimento che ignora le impostazioni di movimento ridotto
- Dirottare lo scorrimento cambiandone la velocità
- Parallasse in ogni sezione della pagina

### Fai

- Un livello di sfondo che si muove un poco
- Contenuto con lo scorrimento normale
- Movimento solo sotto `no-preference`
- Scorrimento nativo, intatto
- Parallasse in un punto solo: di solito l’hero

## La parallasse nel motion design e nei video

La parallasse non è solo per lo scorrimento. In un post animato, un loop o una sequenza di titoli, la stessa regola crea profondità nel tempo: uno sfondo che scorre lentamente, luce o particelle che si muovono un po’ più in fretta e parole che restano ferme davanti. Quest’ultima parte conta. Parole ferme su un campo che si muove dolcemente sembrano calme e sicure, mentre parole che si muovono anch’esse sembrano instabili.

Un hero panoramico di un sito con la scritta Fatti per il lungo cammino per un brand outdoor, con testo fermo su un gradiente che si muove lentamente

Un hero di sito web con profondità: il campo di sfondo si muove lentamente dietro a parole ferme, così l’occhio legge prima il titolo.

Le particelle sono un livello intermedio naturale: [gli effetti particelle](https://gradiently.design/it/guide/particles-effect) mostrano come minuscoli puntini tenui che si muovono un po’ più in fretta dello sfondo aggiungano un secondo piano di profondità. Tieni lento e con easing il movimento di ogni livello; [i principi del motion design](https://gradiently.design/it/guide/motion-design-principles) spiegano perché.

## Progettare un hero con parallasse, passo dopo passo

1. **Progettalo prima fermo** L’hero deve sembrare finito senza alcun movimento, perché è ciò che vedranno i visitatori con movimento ridotto e i browser non supportati.
2. **Separa i livelli** Metti il campo di colore di sfondo su un livello a sé, eventuali forme o foto su un secondo, e titolo e pulsante sulla pagina stessa.
3. **Muovi solo il livello in fondo** Comincia con il solo sfondo che si muove del 10% per parte. Aggiungi un livello intermedio solo se la profondità lo richiede.
4. **Prova su un telefono** Controlla che scorra in modo fluido su un telefono di fascia media e che nulla scatti su Safari per iOS.
5. **Attiva il movimento ridotto e ricontrolla** Nelle impostazioni di accessibilità del sistema, chiedi il movimento ridotto e verifica che la pagina sia calma e completa.

- Livello lontano: cielo notturno: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Livello centrale: bagliore all’orizzonte: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Livello vicino: primo piano scuro: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Tre livelli di gradiente per un hero con parallasse. Sovrapposti, con il livello lontano che si muove meno, sembrano cielo, orizzonte e primo piano.

Per il livello di sfondo stesso, un gradiente vivo fa più di uno piatto. Un Mark di Gradiently esportato come loop WebM o MP4 senza giunture con Pro, messo dietro al tuo hero, dà alla pagina un livello di fondo che già si muove dolcemente e che, una volta riservato, appartiene solo a te. Abbinalo a [il design della sezione hero](https://gradiently.design/it/guide/hero-section-design) e a [gli sfondi hero per siti web](https://gradiently.design/it/guide/website-hero-background) per le misure.

## FAQ

### Cos’è un effetto parallasse?

Un modo di creare profondità muovendo i livelli a velocità diverse, così i livelli più vicini si muovono più in fretta di quelli lontani, come nella vita reale.

### Posso fare un effetto parallasse solo con il CSS?

Sì. Le animazioni CSS guidate dallo scorrimento legano i keyframe alla posizione di scorrimento senza JavaScript, nei browser che supportano `animation-timeline`. I vecchi metodi in solo CSS usano `background-attachment: fixed` o la prospettiva 3D.

### Perché background-attachment: fixed non funziona su iPhone?

Safari su iOS ignora l’aggancio fisso dello sfondo, quindi lo sfondo scorre normalmente. Usa invece le animazioni guidate dallo scorrimento o una tecnica basata su transform.

### Lo scorrimento con parallasse fa male all’accessibilità?

Un movimento ampio innescato dallo scorrimento può far stare male chi ha disturbi vestibolari. Tienilo sottile e disattivalo quando un visitatore preferisce meno movimento.

### La parallasse pesa sulle prestazioni?

Non se animi `transform` e lasci che il browser lo guidi con le animazioni guidate dallo scorrimento. Sono gli script che muovono elementi a ogni evento di scorrimento a causare gli scatti.