# Parallaksiefekti: syvyyttä vieritykseen ja liikegrafiikkaan

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

Parallaksi lainaa silmiesi tuntemaa ilmiötä: lähellä olevat asiat liikkuvat kaukaisia nopeammin. Kevyesti käytettynä se tuo syvyyttä sivuun tai silmukkaan, liioiteltuna matkapahoinvointia. Näin käytät sitä hyvin.

## The short version

- Parallaksiefekti luo syvyyttä liikuttamalla kerroksia eri nopeuksilla. Lähempänä olevat kerrokset liikkuvat kaukaisia nopeammin.
- Verkkosivun parallaksivierityksen voi nyt toteuttaa CSS-vieritysanimaatioilla ilman JavaScriptiä niitä tukevissa selaimissa.
- Vanhempi `background-attachment: fixed` -tekniikka ei toimi iOS Safarissa, joten siihen ei kannata luottaa mobiilissa.
- Laaja tai nopea parallaksiliike voi aiheuttaa epämukavuutta tasapainoelimen häiriöistä kärsiville. Poista se käytöstä, kun kävijä on valinnut vähennetyn liikkeen.
- Hienovarainen parallaksi, jossa kerrokset liikkuvat vain vähän, lisää syvyyttä viemättä huomiota sisällöltä.

**Parallaksiefekti** tuo syvyyttä tasaiseen designiin liikuttamalla sen kerroksia eri nopeuksilla: tausta liikkuu hitaasti, keskitaso hieman nopeammin ja etuala nopeimmin. Samoin kaukaiset kukkulat tuntuvat matelevan junan ikkunan ohi, kun aidantolpat kiitävät vieressä. Verkkosivulla liike seuraa yleensä vieritystä. Liikegrafiikassa se tapahtuu ajan kuluessa, silmukassa tai videolla. Molemmissa paras parallaksi on pieni, hidas ja pois käytöstä kaikilla, jotka ovat pyytäneet laitteeltaan vähemmän liikettä.

## Näin parallaksi luo syvyyttä

Aivot arvioivat etäisyyttä osittain suhteellisen liikkeen avulla. Kun kaksi kerrosta liikkuu samalla nopeudella, ne näyttävät yhdeltä tasaiselta pinnalta. Hitaammin liikkuva kerros taas näyttää kaukaisemmalta. Kolme kerrosta riittää yleensä uskottavaan syvyyteen.

| Kerros | Nopeus suhteessa vieritykseen | Sisältö |
| --- | --- | --- |
| Tausta | Hitain, noin 10-30 % vierityksestä | Liukuväri, taivas, tekstuuri tai pehmeä värikenttä |
| Keskitaso | Keskinopea, noin puolet | Muodot, valokuvat, kuvitukset |
| Etuala | Tavallinen vieritysnopeus | Otsikot, painikkeet, varsinainen sisältö |

Yksinkertainen kolmen kerroksen parallaksi. Pidä sisältö tavallisesti vierivällä kerroksella, jotta liike ei haittaa lukemista.

> **Teksti pysyy paikallaan** Älä sijoita leipätekstiä tai painikkeita liikkuvalle parallaksikerrokselle. Sivusta eri nopeudella liukuvat sanat väsyttävät lukijaa ja vaikeuttavat klikkaamista.

## Parallaksiefekti CSS-vieritysanimaatioilla

Moderni CSS voi sitoa animaation aikaan sijaan vierityskohtaan `animation-timeline`-ominaisuudella. Selain suorittaa sen pääsäikeen ulkopuolella, joten liike pysyy sulavana ilman JavaScriptiä. Tuki laajenee yhä: ominaisuus toimii Chromium-selaimissa ja uudemmassa Safarissa. Tarkista [selaintuki MDN:stä](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) ja toteuta efekti lisäparannuksena. Ilman tukea sivu vain pysyy paikallaan, mikä on täysin sopiva lopputulos.

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

Taustakerros liikkuu hieman, kun pääosio kulkee näkymän läpi. Efekti toimii vain tuetuissa selaimissa ja silloin, kun kävijä ei ole valinnut vähennettyä liikettä.

Liikkeen laajuus määritetään avainkehyksissä: 10 % kumpaankin suuntaan on maltillinen. Yli 20 % alkaa tuntua huvipuistolaitteelta. `transform`-ominaisuuden animointi `top`- tai `background-position`-ominaisuuden sijaan keventää selaimen piirtoa. [CSS-liukuvärien suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance) kertoo, miksi suuria animoituja liukuvärejä kannattaa liikuttaa eikä piirtää uudelleen.

## Muita tapoja toteuttaa parallaksivieritys

| Menetelmä | Toimintatapa | Huomioitavaa |
| --- | --- | --- |
| Vieritysanimaatiot | `animation-timeline: view()` tai `scroll()` sitoo avainkehykset vieritykseen | Ei vielä kaikissa selaimissa; toteuta lisäparannuksena |
| `background-attachment: fixed` | Tausta pysyy paikallaan sisällön vieriessä sen yli | iOS Safari ohittaa asetuksen; vain yksi kiinteä nopeus |
| CSS:n 3D-perspektiivi | `translateZ` siirtää kerroksia kauemmas, jolloin ne vierivät hitaammin | Skaalaus ja vierityssäiliön asetukset vaativat tarkkuutta |
| JavaScript vierityksessä | Skripti liikuttaa kerroksia sivun vieriessä | Jokainen vieritystapahtuma voi nykiä; käytä `requestAnimationFrame`-kutsua |

Neljä tekniikkaa. Uudella sivustolla vieritysanimaatiot ovat selkein valinta.

## Parallaksi ja vähennetty liike

Vierityksen käynnistämä laaja liike voi aiheuttaa huimausta ja pahoinvointia ihmisille, joilla on tasapainoelimen häiriöitä. WCAG:n [vuorovaikutuksesta syntyvän animaation ohje](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) edellyttää, että tällaisen liikkeen voi poistaa käytöstä. Helpoin tapa huomioida tämä on rajata parallaksi ehtoon `prefers-reduced-motion: no-preference`, kuten yllä olevassa koodissa. Se toimii silloin vain kävijöillä, jotka eivät ole pyytäneet vähemmän liikettä. [Vähennetyn liikkeen opas](https://gradiently.design/fi/guide/reduced-motion) käsittelee mediakyselyä ja sen testaamista.

### Vältä

- Kokonaiset osiot liukumassa eri nopeuksilla
- Teksti tai painikkeet liikkuvilla kerroksilla
- Liike, joka ohittaa vähennetyn liikkeen asetuksen
- Vierityksen kaappaaminen ja nopeuden muuttaminen
- Parallaksi sivun jokaisessa osiossa

### Tee näin

- Yksi hieman liikkuva taustakerros
- Sisältö tavallisessa vierityksessä
- Liike vain `no-preference`-ehdolla
- Selaimen oma vieritys sellaisenaan
- Parallaksi yhdessä kohdassa, yleensä pääosiossa

## Parallaksi liikegrafiikassa ja videolla

Parallaksi ei kuulu vain vieritykseen. Liikkuvassa julkaisussa, silmukassa tai alkuteksteissä sama sääntö luo syvyyttä ajan kuluessa: tausta liikkuu hitaasti, valo tai hiukkaset hieman nopeammin ja sanat pysyvät paikallaan edessä. Viimeinen kohta on tärkeä. Paikallaan olevat sanat kevyesti liikkuvalla pinnalla näyttävät rauhallisilta ja varmoilta. Jos sanatkin vaeltavat, vaikutelma on levoton.

Ulkoilubrändin leveä pääosio, jossa lukee Tehty kestämään hitaasti liikkuvan liukuvärin päällä

Verkkosivun pääosio, jossa on syvyyttä: taustan värikenttä liikkuu hitaasti paikallaan pysyvien sanojen takana, joten katse löytää otsikon ensin.

Hiukkaset ovat luonteva keskikerros: [hiukkasefektit](https://gradiently.design/fi/guide/particles-effect) näyttää, miten pienet himmeät pisteet taustaa hieman nopeammassa liikkeessä luovat toisen syvyystason. Pidä kaikkien kerrosten liike hitaana ja pehmeästi kiihtyvänä. [Liikegrafiikan periaatteet](https://gradiently.design/fi/guide/motion-design-principles) kertoo miksi.

## Parallaksipääosion suunnittelu vaiheittain

1. **Suunnittele ensin pysäytyskuva** Pääosion pitää näyttää valmiilta täysin liikkumattomana. Sen näkevät kävijät, joilla on vähennetty liike tai selain ilman animaatiotukea.
2. **Erota kerrokset** Laita taustan värikenttä omalle kerrokselleen, muodot tai kuvat toiselle sekä otsikko ja painike itse sivulle.
3. **Liikuta vain taustaa** Aloita pelkästä taustasta, joka liikkuu 10 % kumpaankin suuntaan. Lisää keskikerros vain, jos syvyys sitä tarvitsee.
4. **Testaa puhelimella** Tarkista sulava vieritys keskihintaisella puhelimella ja varmista, ettei mikään hypähdä iOS Safarissa.
5. **Ota vähennetty liike käyttöön ja tarkista uudelleen** Valitse järjestelmän esteettömyysasetuksista vähennetty liike ja varmista, että sivu on rauhallinen ja valmis.

- Kaukainen kerros: yötaivas: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Keskikerros: horisontin hehku: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Lähikerros: tumma etuala: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Kolme liukuvärikerrosta parallaksipääosioon. Päällekkäin, kauimmaisen liikkuessa vähiten, ne näyttävät taivaalta, horisontilta ja etualalta.

Elävä liukuväri antaa taustakerrokselle enemmän kuin tasainen. Prolla saumattomaksi WebM- tai MP4-silmukaksi viety Gradientlyn Mark pääosion takana tuo sivulle taustan, joka liikkuu jo valmiiksi kevyesti ja kuuluu lunastamisen jälkeen vain sinulle. Katso myös [pääosion suunnittelu](https://gradiently.design/fi/guide/hero-section-design) ja [verkkosivun pääosion taustat](https://gradiently.design/fi/guide/website-hero-background) kokojen valintaan.

## FAQ

### Mikä on parallaksiefekti?

Se luo syvyyttä liikuttamalla kerroksia eri nopeuksilla. Läheiset kerrokset liikkuvat kaukaisia nopeammin kuten todellisessakin maailmassa.

### Voiko parallaksiefektin tehdä pelkällä CSS:llä?

Kyllä. CSS-vieritysanimaatiot sitovat avainkehykset vierityskohtaan ilman JavaScriptiä selaimissa, jotka tukevat `animation-timeline`-ominaisuutta. Vanhemmat pelkän CSS:n menetelmät käyttävät `background-attachment: fixed` -asetusta tai 3D-perspektiiviä.

### Miksi background-attachment: fixed ei toimi iPhonessa?

iOS Safari ohittaa taustan kiinnityksen, joten tausta vierii tavallisesti. Käytä sen sijaan vieritysanimaatioita tai transformaatioihin perustuvaa tekniikkaa.

### Haittaako parallaksivieritys saavutettavuutta?

Vierityksen käynnistämä laaja liike voi aiheuttaa huonovointisuutta tasapainoelimen häiriöistä kärsiville. Pidä liike hienovaraisena ja poista se käytöstä kävijän valitessa vähennetyn liikkeen.

### Heikentääkö parallaksi suorituskykyä?

Ei, jos animoit `transform`-ominaisuutta ja annat selaimen ohjata sitä vieritysanimaatioilla. Jokaisessa vieritystapahtumassa elementtejä liikuttavat skriptit aiheuttavat nykimistä.