Parallaxeffekt: djup i scrollning och rörlig design

En parallaxeffekt får en platt design att kännas djup genom att flytta dess lager i olika hastigheter: bakgrunden glider långsamt, mellanlagret lite snabbare och förgrunden snabbast, precis som avlägsna kullar verkar krypa förbi ett tågfönster medan stängselstolparna susar förbi. På webbplatser sker det oftast när du scrollar. I rörlig design sker det över tid, i en loop eller en video. Hur som helst är den bästa parallaxen liten, långsam och avstängd för alla som bett sin enhet om mindre rörelse.

Så skapar parallax djup

Din hjärna bedömer avstånd delvis utifrån relativ rörelse. När två lager rör sig i samma hastighet läses de som en enda platt yta. När det ena rör sig långsammare läses det som längre bort. Tre lager räcker oftast för att skapa övertygande djup.

Parallaxeffekt i CSS med scrollstyrda animationer

Modern CSS kan koppla en animation till scrollpositionen i stället för till tiden, med animation-timeline. Webbläsaren kör den utanför huvudtråden, så den hålls mjuk, och inget JavaScript behövs. Stödet växer fortfarande: det fungerar i Chromium-webbläsare och nyare Safari, så kontrollera webbläsarstöd på MDN och behandla effekten som en förbättring. Utan stöd rör sig sidan helt enkelt inte, vilket går bra.

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

Rörelsens storlek bestäms i nyckelbildrutorna: 10 % åt vardera håll är milt. Gå förbi 20 % och effekten börjar kännas som en karusell. Att flytta transform i stället för top eller background-position gör det billigt för webbläsaren att rita. CSS-gradienters prestanda förklarar varför stora animerade gradienter ska flyttas, inte ritas om.

Andra sätt att bygga parallaxscrollning

Parallax och minskad rörelse

För personer med vestibulära besvär kan stor rörelse som utlöses av scrollning ge yrsel och illamående. WCAG:s riktlinje om animering från interaktioner kräver att rörelse av det här slaget går att stänga av. Det enklaste sättet att respektera det är att linda in parallaxen i prefers-reduced-motion: no-preference, som i koden ovan, så att den bara körs för besökare som inte bett om mindre rörelse. Föredrar minskad rörelse går igenom mediafrågan och hur du testar den.

Parallax i rörlig design och video

Parallax är inte bara till för scrollning. I ett rörligt inlägg, en loop eller en titelsekvens skapar samma regel djup över tid: en bakgrund som glider långsamt, ljus eller partiklar som rör sig något snabbare och ord som står stilla framför. Den sista delen är viktig. Stilla ord på ett försiktigt rörligt fält läses som lugna och självsäkra, medan ord som också glider ser oroliga ut.

Partiklar är ett naturligt mellanlager: partikeleffekter visar hur små, svaga prickar som rör sig något snabbare än bakgrunden ger ett andra djupplan. Håll varje lagers rörelse långsam och mjukt avtagande; rörlig designs principer förklarar varför.

Designa en parallaxhero, steg för steg

1. 1

   Designa den stilla först

   Hjälten måste se färdig ut helt utan rörelse, eftersom det är vad besökare med minskad rörelse och webbläsare utan stöd kommer att se.

2. 2

   Dela upp lagren

   Lägg bakgrundens färgyta på ett eget lager, eventuella former eller foton på ett andra, och rubriken och knappen på själva sidan.

3. 3

   Flytta bara det bakre lagret

   Börja med att bara bakgrunden rör sig 10 % åt vardera håll. Lägg till ett mellanlager först om djupet kräver det.

4. 4

   Testa på en mobil

   Kontrollera att den scrollar mjukt på en mobil i mellanklassen och att inget hoppar i iOS Safari.

5. 5

   Slå på minskad rörelse och kontrollera igen

   Be om minskad rörelse i systemets tillgänglighetsinställningar och bekräfta att sidan är lugn och komplett.

För själva bakgrundslagret gör en levande gradient mer än en platt. En Gradiently Mark som exporteras som en sömlös WebM- eller MP4-loop med Pro och läggs bakom din hero ger sidan ett bakre lager som redan rör sig försiktigt och som bara är ditt när du säkrat det. Kombinera med design av hero-sektion och hero-bakgrunder för webbplatser för storlekar.