# Parallax-effect: diepte in scrollen en bewegend ontwerp

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

Parallax leent een truc van je eigen ogen: dichtbije dingen bewegen sneller dan verre. Spaarzaam gebruikt geeft het een pagina of loop diepte; overdreven maakt het mensen zeeziek. Zo doe je het goed.

## The short version

- Een parallax-effect creëert diepte door lagen met verschillende snelheden te laten bewegen, waarbij nabije lagen sneller bewegen dan verre.
- Op websites kun je parallaxscrollen nu in CSS bouwen met scrollgestuurde animaties, zonder JavaScript, in browsers die ze ondersteunen.
- De oudere techniek met `background-attachment: fixed` wordt door iOS Safari genegeerd, dus je moet er niet op vertrouwen voor mobiel.
- Grote of snelle parallaxbeweging kan klachten geven bij mensen met een vestibulaire stoornis, dus zet het uit wanneer een bezoeker minder beweging verkiest.
- Subtiele parallax, waarbij lagen maar een klein beetje bewegen, voegt diepte toe zonder af te leiden van de inhoud.

Een **parallax-effect** laat een plat ontwerp diep aanvoelen door de lagen met verschillende snelheden te bewegen: de achtergrond drijft langzaam, het midden iets sneller en de voorgrond het snelst, zoals verre heuvels langs een treinraam lijken te kruipen terwijl de hekpalen voorbijrazen. Op websites gebeurt dat meestal tijdens het scrollen. In bewegend ontwerp gebeurt het in de tijd, in een loop of video. Hoe dan ook is de beste parallax klein, langzaam en uitgeschakeld voor iedereen die zijn apparaat om minder beweging heeft gevraagd.

## Hoe parallax diepte creëert

Je hersenen schatten afstand deels in uit relatieve beweging. Als twee lagen even snel bewegen, lezen ze als één plat vlak. Beweegt een laag langzamer, dan leest die als verder weg. Drie lagen zijn meestal genoeg voor overtuigende diepte.

| Laag | Snelheid ten opzichte van scrollen | Wat erop komt |
| --- | --- | --- |
| Achtergrond | Het langzaamst, ruwweg 10% tot 30% van het scrollen | Een verloop, lucht, textuur of zacht kleurvlak |
| Midden | Gemiddeld, ongeveer de helft | Vormen, foto’s, illustraties |
| Voorgrond | Normale scrollsnelheid | Koppen, knoppen, de eigenlijke inhoud |

Een simpele parallax met drie lagen. Houd de inhoud op de laag die normaal scrolt, zodat lezen nooit wordt beïnvloed.

> **Tekst blijft staan** Zet nooit lopende tekst of knoppen op een bewegende parallaxlaag. Woorden die met een andere snelheid dan de pagina schuiven zijn vermoeiend om te lezen en lastig aan te klikken.

## Parallax-effect in CSS met scrollgestuurde animaties

Moderne CSS kan een animatie aan de scrollpositie koppelen in plaats van aan tijd, met `animation-timeline`. De browser draait het buiten de hoofdthread, dus het blijft soepel, en JavaScript is niet nodig. De ondersteuning groeit nog: het werkt in Chromium-browsers en recente Safari, dus controleer de [browserondersteuning op MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) en behandel het effect als een verbetering. Zonder ondersteuning beweegt de pagina gewoon niet, en dat is prima.

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

De achtergrondlaag beweegt een beetje terwijl de hero door het kijkvenster gaat. Het draait alleen waar het wordt ondersteund en waar de bezoeker niet om minder beweging heeft gevraagd.

De omvang van de beweging zit in de keyframes: 10% elke kant op is zacht. Ga je voorbij 20%, dan begint het effect op een attractie te lijken. `transform` bewegen in plaats van `top` of `background-position` houdt het goedkoop voor de browser om te tekenen. [CSS-verloopprestaties](https://gradiently.design/nl/guide/css-gradient-performance) legt uit waarom grote geanimeerde verlopen moeten bewegen in plaats van opnieuw te worden getekend.

## Andere manieren om parallaxscrollen te bouwen

| Methode | Hoe het werkt | Let op |
| --- | --- | --- |
| Scrollgestuurde animaties | `animation-timeline: view()` of `scroll()` koppelt keyframes aan scrollen | Nog niet in elke browser; bouw het als verbetering |
| `background-attachment: fixed` | De achtergrond blijft stil terwijl de inhoud erover scrolt | Genegeerd door iOS Safari; maar één vaste snelheid |
| CSS 3D-perspectief | Lagen die met `translateZ` naar achteren zijn geduwd scrollen langzamer | Lastige schaling en scrollcontainerinstelling |
| JavaScript bij scrollen | Een script beweegt lagen terwijl de pagina scrolt | Kan haperen als het bij elk scrollevent draait; gebruik `requestAnimationFrame` |

Vier technieken. Voor een nieuwe site zijn scrollgestuurde animaties de schoonste keuze.

## Parallax en minder beweging

Voor mensen met een vestibulaire stoornis kan grote beweging die door scrollen wordt geactiveerd duizeligheid en misselijkheid veroorzaken. De richtlijn van WCAG over [animatie door interacties](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) vraagt dat zulke beweging kan worden uitgezet. De simpelste manier om dat te respecteren is parallax in `prefers-reduced-motion: no-preference` te wikkelen, zoals in de code hierboven, zodat het alleen draait voor bezoekers die niet om minder beweging hebben gevraagd. [Prefers reduced motion](https://gradiently.design/nl/guide/reduced-motion) behandelt de media query en hoe je hem test.

### Vermijd

- Hele secties die met verschillende snelheden schuiven
- Tekst of knoppen op bewegende lagen
- Beweging die de instellingen voor minder beweging negeert
- Scrollkapingen die de scrollsnelheid veranderen
- Parallax in elke sectie van de pagina

### Doe dit

- Eén achtergrondlaag die een klein beetje beweegt
- Inhoud op het normale scrollen
- Beweging alleen onder `no-preference`
- Native scrollen, onaangeroerd
- Parallax op één plek: meestal de hero

## Parallax in bewegend ontwerp en video

Parallax is niet alleen voor scrollen. In een bewegend bericht, een loop of een titelsequentie creëert dezelfde regel diepte in de tijd: een achtergrond die langzaam drijft, licht of deeltjes die iets sneller bewegen en woorden die stilstaan op de voorgrond. Dat laatste telt. Stilstaande woorden op een zacht bewegend vlak lezen als rustig en zelfverzekerd, terwijl woorden die ook driften onrustig ogen.

Een breedbeeld website-hero met de tekst Gebouwd voor de lange adem voor een outdoormerk, met stilstaande tekst over een langzaam bewegend verloop

Een website-hero met diepte: het achtergrondvlak beweegt langzaam achter stilstaande woorden, zodat het oog eerst de kop leest.

Deeltjes zijn een natuurlijke middenlaag: [deeltjeseffecten](https://gradiently.design/nl/guide/particles-effect) laat zien hoe kleine, zwakke stipjes die iets sneller bewegen dan de achtergrond een tweede diepteplan toevoegen. Houd de beweging van elke laag langzaam en met easing; [principes van bewegend ontwerp](https://gradiently.design/nl/guide/motion-design-principles) legt uit waarom.

## Een parallax-hero ontwerpen, stap voor stap

1. **Ontwerp hem eerst stilstaand** De hero moet er zonder enige beweging af uitzien, want dat is wat bezoekers met minder beweging en niet-ondersteunende browsers zien.
2. **Scheid de lagen** Zet het achtergrondkleurvlak op een eigen laag, eventuele vormen of foto’s op een tweede en de kop en knop op de pagina zelf.
3. **Beweeg alleen de achterste laag** Begin met alleen de achtergrond die 10% elke kant op beweegt. Voeg een middenlaag alleen toe als de diepte dat nodig heeft.
4. **Test op een telefoon** Controleer dat het soepel scrolt op een telefoon uit het middensegment en dat niets springt op iOS Safari.
5. **Zet minder beweging aan en controleer opnieuw** Vraag in de toegankelijkheidsinstellingen van je systeem om minder beweging en bevestig dat de pagina rustig en compleet is.

- Verre laag: nachtlucht: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Middenlaag: horizongloed: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Nabije laag: donkere voorgrond: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Drie verlooplagen voor een parallax-hero. Gestapeld, met de verste laag die het minst beweegt, lezen ze als lucht, horizon en voorgrond.

Voor de achtergrondlaag zelf doet een levend verloop meer dan een vlak. Een Gradiently Mark geëxporteerd als naadloze WebM- of MP4-loop met Pro, achter je hero gezet, geeft de pagina een achterlaag die al zacht beweegt en alleen van jou is zodra je hem claimt. Combineer het met [ontwerp van een herosectie](https://gradiently.design/nl/guide/hero-section-design) en [website-heroachtergronden](https://gradiently.design/nl/guide/website-hero-background) voor formaten.

## FAQ

### Wat is een parallax-effect?

Een manier om diepte te creëren door lagen met verschillende snelheden te bewegen, zodat nabije lagen sneller bewegen dan verre, zoals in het echt.

### Kan ik een parallax-effect maken met alleen CSS?

Ja. CSS-scrollgestuurde animaties koppelen keyframes aan de scrollpositie zonder JavaScript, in browsers die `animation-timeline` ondersteunen. Oudere pure CSS-methoden gebruiken `background-attachment: fixed` of 3D-perspectief.

### Waarom werkt background-attachment: fixed niet op iPhone?

iOS Safari negeert vaste achtergrondbevestiging, dus de achtergrond scrolt gewoon mee. Gebruik in plaats daarvan scrollgestuurde animaties of een techniek op basis van transform.

### Is parallaxscrollen slecht voor toegankelijkheid?

Grote door scrollen geactiveerde beweging kan mensen met een vestibulaire stoornis onwel maken. Houd het subtiel en zet het uit als een bezoeker minder beweging verkiest.

### Is parallax slecht voor de prestaties?

Niet als je `transform` animeert en de browser het laat aansturen met scrollgestuurde animaties. Scripts die elementen bij elk scrollevent verplaatsen veroorzaken het haperen.