Parallax-effect: diepte in scrollen en bewegend ontwerp

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.

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 en behandel het effect als een verbetering. Zonder ondersteuning beweegt de pagina gewoon niet, en dat is prima.

.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 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 legt uit waarom grote geanimeerde verlopen moeten bewegen in plaats van opnieuw te worden getekend.

Andere manieren om parallaxscrollen te bouwen

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 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 behandelt de media query en hoe je hem test.

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.

Deeltjes zijn een natuurlijke middenlaag: deeltjeseffecten 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 legt uit waarom.

Een parallax-hero ontwerpen, stap voor stap

1. 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. 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. 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. 4

   Test op een telefoon

   Controleer dat het soepel scrolt op een telefoon uit het middensegment en dat niets springt op iOS Safari.

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

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 en website-heroachtergronden voor formaten.