Effetto parallasse: profondità nello scorrimento

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.

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 e tratta l’effetto come un miglioramento. Senza supporto la pagina semplicemente non si muove, ed è accettabile.

.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%); }
}

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 spiega perché i grandi gradienti animati devono muoversi, non ridisegnarsi.

Altri modi di costruire la parallasse nello scorrimento

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 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 tratta la media query e come provarla.

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.

Le particelle sono un livello intermedio naturale: gli effetti particelle 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 spiegano perché.

Progettare un hero con parallasse, passo dopo passo

1. 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. 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. 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. 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. 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.

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 e a gli sfondi hero per siti web per le misure.