Parallakseeffekt: dybde i scrolling og bevegelsesdesign

En parallakseeffekt får et flatt design til å føles dypt ved å flytte lagene i ulik fart: bakgrunnen glir sakte, midten litt raskere og forgrunnen raskest, akkurat som fjerne åser ser ut til å krype forbi et togvindu mens gjerdestolpene suser forbi. På nettsteder skjer det som regel når du scroller. I bevegelsesdesign skjer det over tid, i en loop eller en video. Uansett er den beste parallaksen liten, langsom og slått av for alle som har bedt enheten sin om mindre bevegelse.

Hvordan parallakse skaper dybde

Hjernen din bedømmer avstand delvis ut fra relativ bevegelse. Når to lag beveger seg i samme fart, leses de som én flat overflate. Når ett beveger seg saktere, leses det som lenger unna. Tre lag er som regel nok til å skape overbevisende dybde.

Parallakseeffekt i CSS med scrollstyrte animasjoner

Moderne CSS kan knytte en animasjon til scrollposisjon i stedet for tid, med animation-timeline. Nettleseren kjører den utenfor hovedtråden, så den forblir jevn, og du trenger ikke JavaScript. Støtten vokser fortsatt: den virker i Chromium-nettlesere og nyere Safari, så sjekk nettleserstøtten på MDN og behandle effekten som en forbedring. Uten støtte står siden ganske enkelt stille, og det er helt greit.

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

Hvor stor bevegelsen er, bestemmes i keyframes: 10 % hver vei er forsiktig. Går du over 20 %, begynner effekten å føles som en karusell. Å flytte transform i stedet for top eller background-position gjør det billig for nettleseren å tegne. Ytelse for CSS-gradienter forklarer hvorfor store animerte gradienter bør flyttes, ikke tegnes på nytt.

Andre måter å bygge parallax scrolling på

Parallakse og redusert bevegelse

For personer med vestibulære lidelser kan store bevegelser utløst av scrolling gi svimmelhet og kvalme. WCAGs veiledning om animasjon fra interaksjoner krever at slik bevegelse kan slås av. Den enkleste måten å respektere det på er å pakke parallaksen inn i prefers-reduced-motion: no-preference, som i koden over, så den bare kjører for besøkende som ikke har bedt om mindre bevegelse. Prefers reduced motion dekker mediespørringen og hvordan du tester den.

Parallakse i bevegelsesdesign og video

Parallakse er ikke bare for scrolling. I et innlegg med bevegelse, en loop eller en tittelsekvens skaper den samme regelen dybde over tid: en bakgrunn som glir sakte, lys eller partikler som beveger seg litt raskere, og ord som står stille foran. Det siste betyr noe. Stille ord på et felt i rolig bevegelse leses som rolige og trygge, mens ord som også glir, virker urolige.

Partikler er et naturlig mellomlag: partikkeleffekter viser hvordan små, svake prikker som beveger seg litt raskere enn bakgrunnen, legger til et ekstra dybdeplan. Hold bevegelsen i hvert lag langsom og myk; prinsipper for bevegelsesdesign forklarer hvorfor.

Slik designer du en parallaksehero, steg for steg

1. 1

   Design den stillestående først

   Heroen må se ferdig ut helt uten bevegelse, for det er det besøkende med redusert bevegelse og nettlesere uten støtte vil se.

2. 2

   Skill lagene fra hverandre

   Legg bakgrunnens fargefelt på et eget lag, eventuelle former eller bilder på et annet, og overskriften og knappen på selve siden.

3. 3

   Flytt bare det bakerste laget

   Start med at bare bakgrunnen beveger seg 10 % hver vei. Legg til et mellomlag bare hvis dybden trenger det.

4. 4

   Test på en mobil

   Sjekk at den scroller jevnt på en mobil i mellomklassen, og at ingenting hopper i iOS Safari.

5. 5

   Slå på redusert bevegelse og sjekk igjen

   Be om redusert bevegelse i tilgjengelighetsinnstillingene på systemet ditt, og bekreft at siden er rolig og komplett.

Til selve bakgrunnslaget gjør en levende gradient mer enn en flat. En Gradiently-Mark eksportert som en sømløs WebM- eller MP4-loop med Pro og lagt bak heroen gir siden et bakre lag som allerede beveger seg rolig, og som bare tilhører deg når du har sikret deg den. Kombiner med design av heroseksjon og herobakgrunner for nettsteder for størrelser.