Parallakseeffekt: dybde i scroll og motion design

En parallakseeffekt får et fladt design til at føles dybt ved at flytte lagene med forskellig fart: baggrunden glider langsomt, midten lidt hurtigere og forgrunden hurtigst, præcis som fjerne bakker ser ud til at kravle forbi et togvindue, mens hegnspælene suser forbi. På websites sker det som regel, når du scroller. I motion design sker det over tid, i et loop eller en video. Uanset hvad er den bedste parallakse lille, langsom og slået fra for alle, der har bedt deres enhed om mindre bevægelse.

Sådan skaber parallakse dybde

Din hjerne vurderer afstand delvist ud fra relativ bevægelse. Når to lag bevæger sig med samme fart, opleves de som én flad overflade. Når det ene bevæger sig langsommere, opleves det som længere væk. Tre lag er som regel nok til at skabe overbevisende dybde.

Parallakseeffekt i CSS med scroll-drevne animationer

Moderne CSS kan knytte en animation til scrollposition i stedet for tid med animation-timeline. Browseren kører den uden for hovedtråden, så den forbliver jævn, og der skal ikke bruges JavaScript. Understøttelsen vokser stadig: den virker i Chromium-browsere og nyere Safari, så tjek browserunderstøttelse på MDN, og behandl effekten som en forbedring. Uden understøttelse bevæger siden sig bare ikke, og det er helt fint.

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

Bevægelsens størrelse bor i keyframes: 10 % hver vej er blidt. Går du over 20 %, begynder effekten at føles som en tur i forlystelsesparken. Flytter du transform i stedet for top eller background-position, er den billig for browseren at tegne. Ydeevne for CSS-gradienter forklarer, hvorfor store animerede gradienter skal flyttes og ikke males om.

Andre måder at bygge parallax scrolling på

Parallakse og reduceret bevægelse

For mennesker med vestibulære lidelser kan store bevægelser, der udløses af scroll, give svimmelhed og kvalme. WCAG’s vejledning om animation fra interaktioner beder om, at bevægelse som denne kan slås fra. Den enkleste måde at respektere det på er at pakke parallaksen ind i prefers-reduced-motion: no-preference, som i koden ovenfor, så den kun kører for besøgende, der ikke har bedt om mindre bevægelse. Prefers reduced motion dækker medieforespørgslen, og hvordan du tester den.

Parallakse i motion design og video

Parallakse er ikke kun til scroll. I et levende opslag, et loop eller en titelsekvens skaber samme regel dybde over tid: en baggrund, der glider langsomt, lys eller partikler, der bevæger sig lidt hurtigere, og ord, der står stille foran. Den sidste del betyder noget. Stillestående ord på et blidt bevægeligt felt virker rolige og selvsikre, mens ord, der også glider, virker urolige.

Partikler er et naturligt mellemlag: partikeleffekter viser, hvordan små, svage prikker, der bevæger sig lidt hurtigere end baggrunden, tilføjer et ekstra dybdeplan. Hold hvert lags bevægelse langsom og blød; principper for motion design forklarer hvorfor.

Design af en parallakse-hero, trin for trin

1. 1

   Design den stillestående først

   Heroen skal se færdig ud helt uden bevægelse, for det er det, besøgende med reduceret bevægelse og browsere uden understøttelse ser.

2. 2

   Adskil lagene

   Læg baggrundens farvefelt på sit eget lag, eventuelle former eller fotos på et andet og overskrift og knap på selve siden.

3. 3

   Flyt kun det bageste lag

   Start med kun baggrunden, der flytter sig 10 % hver vej. Tilføj kun et mellemlag, hvis dybden kræver det.

4. 4

   Test på en telefon

   Tjek, at den scroller jævnt på en mellemklassetelefon, og at intet hopper i iOS Safari.

5. 5

   Slå reduceret bevægelse til, og tjek igen

   Bed om reduceret bevægelse i dit systems tilgængelighedsindstillinger, og bekræft, at siden er rolig og komplet.

Til selve baggrundslaget gør en levende gradient mere end en flad. En Gradiently Mark eksporteret som et sømløst WebM- eller MP4-loop med Pro og sat bag din hero giver siden et bageste lag, der allerede bevæger sig blidt og kun tilhører dig, når du har sikret dig den. Kombinér det med design af herosektioner og baggrunde til website-heroer for størrelser.