# Parallakseeffekt: dybde i scroll og motion design

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

Parallakse låner et trick fra dine egne øjne: ting tæt på bevæger sig hurtigere end ting langt væk. Brugt let giver den dybde til en side eller et loop; overdrevet giver den folk søsyge. Her er, hvordan du gør det godt.

## The short version

- En parallakseeffekt skaber dybde ved at flytte lag med forskellig fart, hvor de nærmeste lag bevæger sig hurtigere end de fjerne.
- På websites kan parallax scrolling nu bygges i CSS med scroll-drevne animationer, uden JavaScript, i browsere, der understøtter dem.
- Den ældre teknik `background-attachment: fixed` ignoreres af iOS Safari, så den bør ikke være noget, du stoler på til mobil.
- Stor eller hurtig parallaksebevægelse kan give ubehag for mennesker med vestibulære lidelser, så den bør slås fra, når en besøgende foretrækker reduceret bevægelse.
- Diskret parallakse, hvor lagene kun flytter sig lidt, giver dybde uden at tage opmærksomheden fra indholdet.

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.

| Lag | Fart i forhold til scroll | Hvad der skal på det |
| --- | --- | --- |
| Baggrund | Langsomst, cirka 10 % til 30 % af scrollet | En gradient, himmel, tekstur eller et blødt farvefelt |
| Midte | Mellem, omkring det halve | Former, fotos, illustrationer |
| Forgrund | Normal scrollfart | Overskrifter, knapper, selve indholdet |

En enkel parallakse i tre lag. Hold indholdet på det lag, der scroller normalt, så læsningen aldrig påvirkes.

> **Teksten bliver, hvor den er** Sæt aldrig brødtekst eller knapper på et bevægeligt parallakselag. Ord, der glider med en anden fart end siden, er trættende at læse og svære at klikke på.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline), og behandl effekten som en forbedring. Uden understøttelse bevæger siden sig bare ikke, og det er helt fint.

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

Baggrundslaget flytter sig lidt, mens heroen passerer gennem viewporten. Det kører kun, hvor det understøttes, og hvor den besøgende ikke har bedt om reduceret bevægelse.

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](https://gradiently.design/da/guide/css-gradient-performance) forklarer, hvorfor store animerede gradienter skal flyttes og ikke males om.

## Andre måder at bygge parallax scrolling på

| Metode | Sådan virker den | Pas på med |
| --- | --- | --- |
| Scroll-drevne animationer | `animation-timeline: view()` eller `scroll()` knytter keyframes til scroll | Endnu ikke i alle browsere; byg det som en forbedring |
| `background-attachment: fixed` | Baggrunden står stille, mens indholdet scroller hen over den | Ignoreres af iOS Safari; kun én fast fart |
| CSS 3D-perspektiv | Lag skubbet tilbage med `translateZ` scroller langsommere | Besværlig skalering og opsætning af scrollcontainer |
| JavaScript ved scroll | Et script flytter lagene, mens siden scroller | Kan hakke, hvis det kører ved hver scrollhændelse; brug `requestAnimationFrame` |

Fire teknikker. Til et nyt site er scroll-drevne animationer det reneste valg.

## 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](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) 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](https://gradiently.design/da/guide/reduced-motion) dækker medieforespørgslen, og hvordan du tester den.

### Undgå

- Hele sektioner, der glider med forskellig fart
- Tekst eller knapper på bevægelige lag
- Bevægelse, der ignorerer indstillinger for reduceret bevægelse
- Scroll hijacking, der ændrer scrollfarten
- Parallakse i hver eneste sektion på siden

### Gør

- Ét baggrundslag, der flytter sig lidt
- Indholdet på det normale scroll
- Bevægelse kun under `no-preference`
- Indbygget scroll, uberørt
- Parallakse ét sted: som regel heroen

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

En widescreen website-hero med teksten Bygget til den lange tur for et friluftsbrand, med stillestående tekst over en langsomt bevægende gradient

En website-hero med dybde: baggrundsfeltet bevæger sig langsomt bag stillestående ord, så øjet læser overskriften først.

Partikler er et naturligt mellemlag: [partikeleffekter](https://gradiently.design/da/guide/particles-effect) 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](https://gradiently.design/da/guide/motion-design-principles) forklarer hvorfor.

## Design af en parallakse-hero, trin for trin

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. **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. **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. **Test på en telefon** Tjek, at den scroller jævnt på en mellemklassetelefon, og at intet hopper i iOS Safari.
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.

- Fjernt lag: nattehimmel: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Mellemlag: horisontglød: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Nært lag: mørk forgrund: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Tre gradientlag til en parallakse-hero. Stablet, med det fjerne lag som det, der bevæger sig mindst, opleves de som himmel, horisont og forgrund.

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](https://gradiently.design/da/guide/hero-section-design) og [baggrunde til website-heroer](https://gradiently.design/da/guide/website-hero-background) for størrelser.

## FAQ

### Hvad er en parallakseeffekt?

En måde at skabe dybde på ved at flytte lag med forskellig fart, så nærmere lag bevæger sig hurtigere end fjerne, som de gør i virkeligheden.

### Kan jeg lave en parallakseeffekt med kun CSS?

Ja. Scroll-drevne animationer i CSS knytter keyframes til scrollpositionen uden JavaScript i browsere, der understøtter `animation-timeline`. Ældre rene CSS-metoder bruger `background-attachment: fixed` eller 3D-perspektiv.

### Hvorfor virker background-attachment: fixed ikke på iPhone?

iOS Safari ignorerer fast baggrundsplacering, så baggrunden scroller normalt. Brug scroll-drevne animationer eller en teknik baseret på transform i stedet.

### Er parallax scrolling dårligt for tilgængeligheden?

Store bevægelser udløst af scroll kan få mennesker med vestibulære lidelser til at få det dårligt. Hold det diskret, og slå det fra, når en besøgende foretrækker reduceret bevægelse.

### Er parallakse dårligt for ydeevnen?

Ikke hvis du animerer `transform` og lader browseren styre det med scroll-drevne animationer. Det er scripts, der flytter elementer ved hver scrollhændelse, der får det til at hakke.