# Parallaxeffekt: djup i scrollning och rörlig design

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

Parallax lånar ett knep från dina egna ögon: det som är nära rör sig snabbare än det som är långt bort. Används det lätt ger det djup åt en sida eller en loop, överdrivet gör det folk åksjuka. Så gör du det bra.

## The short version

- En parallaxeffekt skapar djup genom att flytta lager i olika hastigheter, där närmare lager rör sig snabbare än avlägsna.
- På webbplatser kan parallaxscrollning numera byggas i CSS med scrollstyrda animationer, utan JavaScript, i webbläsare som stöder dem.
- Den äldre tekniken `background-attachment: fixed` ignoreras av iOS Safari och bör därför inte förlitas på för mobil.
- Stor eller snabb parallaxrörelse kan ge obehag för personer med vestibulära besvär, så den bör stängas av när en besökare föredrar minskad rörelse.
- Subtil parallax, där lagren bara rör sig lite, ger djup utan att distrahera från innehållet.

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.

| Lager | Hastighet i förhållande till scrollen | Vad som läggs där |
| --- | --- | --- |
| Bakgrund | Långsammast, ungefär 10 % till 30 % av scrollen | En gradient, himmel, textur eller mjuk färgyta |
| Mitten | Medel, ungefär hälften | Former, foton, illustrationer |
| Förgrund | Normal scrollhastighet | Rubriker, knappar, själva innehållet |

En enkel parallax med tre lager. Låt innehållet ligga på lagret som scrollar normalt, så att läsningen aldrig påverkas.

> **Texten står stilla** Lägg aldrig brödtext eller knappar på ett rörligt parallaxlager. Ord som glider i en annan hastighet än sidan är tröttsamma att läsa och svåra att klicka på.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) och behandla effekten som en förbättring. Utan stöd rör sig sidan helt enkelt inte, vilket går bra.

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

Bakgrundslagret rör sig lite medan hjälten (hero) passerar genom visningsområdet. Det körs bara där det stöds och där besökaren inte bett om minskad rörelse.

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](https://gradiently.design/sv/guide/css-gradient-performance) förklarar varför stora animerade gradienter ska flyttas, inte ritas om.

## Andra sätt att bygga parallaxscrollning

| Metod | Så fungerar den | Se upp med |
| --- | --- | --- |
| Scrollstyrda animationer | `animation-timeline: view()` eller `scroll()` kopplar nyckelbildrutor till scrollen | Finns inte i alla webbläsare än; bygg det som en förbättring |
| `background-attachment: fixed` | Bakgrunden står still medan innehållet scrollar över den | Ignoreras av iOS Safari; bara en fast hastighet |
| CSS 3D-perspektiv | Lager som skjuts bakåt med `translateZ` scrollar långsammare | Kinkig skalning och uppsättning av scrollbehållare |
| JavaScript vid scroll | Ett skript flyttar lager när sidan scrollar | Kan hacka om det körs vid varje scrollhändelse; använd `requestAnimationFrame` |

Fyra tekniker. För en ny webbplats är scrollstyrda animationer det renaste valet.

## 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](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) 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](https://gradiently.design/sv/guide/reduced-motion) går igenom mediafrågan och hur du testar den.

### Undvik

- Hela sektioner som glider i olika hastigheter
- Text eller knappar på rörliga lager
- Rörelse som ignorerar inställningen för minskad rörelse
- Scrollkapning som ändrar scrollhastigheten
- Parallax i varje sektion på sidan

### Gör så här

- Ett bakgrundslager som rör sig lite
- Innehåll på den normala scrollen
- Rörelse bara under `no-preference`
- Naturlig scrollning, orörd
- Parallax på ett ställe: oftast hjälten (hero)

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

En bredbildshero på en webbplats med texten Byggd för långa vägar för ett friluftsvarumärke, med stilla text över en långsamt rörlig gradient

En hero på en webbplats med djup: bakgrundsfältet rör sig långsamt bakom stilla ord, så ögat läser rubriken först.

Partiklar är ett naturligt mellanlager: [partikeleffekter](https://gradiently.design/sv/guide/particles-effect) 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](https://gradiently.design/sv/guide/motion-design-principles) förklarar varför.

## Designa en parallaxhero, steg för steg

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. **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. **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. **Testa på en mobil** Kontrollera att den scrollar mjukt på en mobil i mellanklassen och att inget hoppar i iOS Safari.
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.

- Bakre lager: nattehimmel: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Mellanlager: horisontglöd: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Främre lager: mörk förgrund: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Tre gradientlager för en parallaxhero. Staplade, med det bakre lagret som rör sig minst, läses de som himmel, horisont och förgrund.

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](https://gradiently.design/sv/guide/hero-section-design) och [hero-bakgrunder för webbplatser](https://gradiently.design/sv/guide/website-hero-background) för storlekar.

## FAQ

### Vad är en parallaxeffekt?

Ett sätt att skapa djup genom att flytta lager i olika hastigheter, så att närmare lager rör sig snabbare än avlägsna, som de gör i verkligheten.

### Kan jag göra en parallaxeffekt med bara CSS?

Ja. CSS scrollstyrda animationer kopplar nyckelbildrutor till scrollpositionen utan JavaScript, i webbläsare som stöder `animation-timeline`. Äldre rena CSS-metoder använder `background-attachment: fixed` eller 3D-perspektiv.

### Varför fungerar inte background-attachment: fixed på iPhone?

iOS Safari ignorerar fast bakgrundsfäste, så bakgrunden scrollar som vanligt. Använd scrollstyrda animationer eller en transform-baserad teknik i stället.

### Är parallaxscrollning dåligt för tillgängligheten?

Stor rörelse som utlöses av scroll kan få personer med vestibulära besvär att må dåligt. Håll den subtil och stäng av den när en besökare föredrar minskad rörelse.

### Är parallax dåligt för prestandan?

Inte om du animerar `transform` och låter webbläsaren driva den med scrollstyrda animationer. Skript som flyttar element vid varje scrollhändelse är det som orsakar hackighet.