# Parallakseeffekt: dybde i scrolling og bevegelsesdesign

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

Parallakse låner et triks fra dine egne øyne: det som er nært, beveger seg raskere enn det som er langt unna. Brukt lett gir det dybde til en side eller en loop; overdrevet gjør det folk sjøsyke. Slik gjør du det godt.

## The short version

- En parallakseeffekt skaper dybde ved å flytte lag i ulik fart, der nære lag beveger seg raskere enn fjerne.
- På nettsteder kan parallax scrolling nå bygges i CSS med scrollstyrte animasjoner, uten JavaScript, i nettlesere som støtter dem.
- Den eldre teknikken `background-attachment: fixed` ignoreres av iOS Safari, så den bør ikke brukes på mobil.
- Store eller raske parallaksebevegelser kan gi ubehag for personer med vestibulære lidelser, så de bør slås av når en besøkende foretrekker redusert bevegelse.
- Diskret parallakse, der lagene bare beveger seg litt, gir dybde uten å ta oppmerksomheten fra innholdet.

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.

| Lag | Fart i forhold til scrolling | Hva som ligger på det |
| --- | --- | --- |
| Bakgrunn | Saktest, omtrent 10 % til 30 % av scrollingen | En gradient, himmel, tekstur eller et mykt fargefelt |
| Midten | Middels, rundt halvparten | Former, bilder, illustrasjoner |
| Forgrunn | Vanlig scrollfart | Overskrifter, knapper, selve innholdet |

En enkel parallakse i tre lag. Hold innholdet på laget som scroller normalt, så lesingen aldri påvirkes.

> **Teksten står stille** Legg aldri brødtekst eller knapper på et parallakselag som beveger seg. Ord som glir i en annen fart enn siden, er slitsomme å lese og vanskelige å klikke på.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) og behandle effekten som en forbedring. Uten støtte står siden ganske enkelt stille, og det er helt greit.

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

Bakgrunnslaget beveger seg litt mens heroen passerer gjennom visningsområdet. Det kjører bare der det støttes, og der den besøkende ikke har bedt om redusert bevegelse.

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](https://gradiently.design/nb/guide/css-gradient-performance) forklarer hvorfor store animerte gradienter bør flyttes, ikke tegnes på nytt.

## Andre måter å bygge parallax scrolling på

| Metode | Slik virker den | Pass på |
| --- | --- | --- |
| Scrollstyrte animasjoner | `animation-timeline: view()` eller `scroll()` knytter keyframes til scrolling | Ikke i alle nettlesere ennå; bygg det som en forbedring |
| `background-attachment: fixed` | Bakgrunnen står stille mens innholdet scroller over den | Ignoreres av iOS Safari; bare én fast fart |
| CSS 3D-perspektiv | Lag som skyves bakover med `translateZ`, scroller saktere | Pirkete skalering og oppsett av scrollbeholder |
| JavaScript ved scrolling | Et skript flytter lagene mens siden scrolles | Kan hakke hvis det kjører på hver scrollhendelse; bruk `requestAnimationFrame` |

Fire teknikker. For et nytt nettsted er scrollstyrte animasjoner det ryddigste valget.

## 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](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) 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](https://gradiently.design/nb/guide/reduced-motion) dekker mediespørringen og hvordan du tester den.

### Unngå

- Hele seksjoner som glir i ulik fart
- Tekst eller knapper på lag som beveger seg
- Bevegelse som overser innstillinger for redusert bevegelse
- Scrollkapring som endrer scrollfarten
- Parallakse i hver eneste seksjon på siden

### Gjør

- Ett bakgrunnslag som beveger seg litt
- Innhold som følger vanlig scrolling
- Bevegelse bare under `no-preference`
- Innebygd scrolling, urørt
- Parallakse ett sted: som regel heroen

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

En hero i bredformat for et friluftsmerke med teksten Laget for de lange turene, med stillestående skrift over en gradient i langsom bevegelse

En hero for et nettsted med dybde: bakgrunnsfeltet beveger seg sakte bak stille ord, så øyet leser overskriften først.

Partikler er et naturlig mellomlag: [partikkeleffekter](https://gradiently.design/nb/guide/particles-effect) 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](https://gradiently.design/nb/guide/motion-design-principles) forklarer hvorfor.

## Slik designer du en parallaksehero, steg for steg

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. **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. **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. **Test på en mobil** Sjekk at den scroller jevnt på en mobil i mellomklassen, og at ingenting hopper i iOS Safari.
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.

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

Tre gradientlag til en parallaksehero. Stablet, med det fjerne laget som beveger seg minst, leses de som himmel, horisont og forgrunn.

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

## FAQ

### Hva er en parallakseeffekt?

En måte å skape dybde på ved å flytte lag i ulik fart, slik at nære lag beveger seg raskere enn fjerne, slik de gjør i virkeligheten.

### Kan jeg lage en parallakseeffekt med bare CSS?

Ja. Scrollstyrte animasjoner i CSS knytter keyframes til scrollposisjon uten JavaScript, i nettlesere som støtter `animation-timeline`. Eldre rene CSS-metoder bruker `background-attachment: fixed` eller 3D-perspektiv.

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

iOS Safari ignorerer fast bakgrunnsfeste, så bakgrunnen scroller som normalt. Bruk scrollstyrte animasjoner eller en teknikk basert på transform i stedet.

### Er parallax scrolling dårlig for tilgjengelighet?

Store bevegelser utløst av scrolling kan gjøre at personer med vestibulære lidelser føler seg uvel. Hold det diskret og slå det av når en besøkende foretrekker redusert bevegelse.

### Er parallakse dårlig for ytelsen?

Ikke hvis du animerer `transform` og lar nettleseren styre det med scrollstyrte animasjoner. Det er skript som flytter elementer på hver scrollhendelse, som gir hakking.