Parallaksiefekti: syvyyttä vieritykseen ja liikegrafiikkaan

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.

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ä ja toteuta efekti lisäparannuksena. Ilman tukea sivu vain pysyy paikallaan, mikä on täysin sopiva lopputulos.

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

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 kertoo, miksi suuria animoituja liukuvärejä kannattaa liikuttaa eikä piirtää uudelleen.

Muita tapoja toteuttaa parallaksivieritys

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 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 käsittelee mediakyselyä ja sen testaamista.

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.

Hiukkaset ovat luonteva keskikerros: hiukkasefektit 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 kertoo miksi.

Parallaksipääosion suunnittelu vaiheittain

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

   Erota kerrokset

   Laita taustan värikenttä omalle kerrokselleen, muodot tai kuvat toiselle sekä otsikko ja painike itse sivulle.

3. 3

   Liikuta vain taustaa

   Aloita pelkästä taustasta, joka liikkuu 10 % kumpaankin suuntaan. Lisää keskikerros vain, jos syvyys sitä tarvitsee.

4. 4

   Testaa puhelimella

   Tarkista sulava vieritys keskihintaisella puhelimella ja varmista, ettei mikään hypähdä iOS Safarissa.

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

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 ja verkkosivun pääosion taustat kokojen valintaan.