CSS:n vieritysohjattujen animaatioiden suunnan hallinta: Syväsukellus virtauksen ohjaukseen

Vuosien ajan käyttäjän vierityssijaintiin reagoivien animaatioiden luominen kuului JavaScriptin toimialueeseen. GSAP:n ja ScrollMagicin kaltaisista kirjastoista tuli välttämättömiä työkaluja, mutta niillä oli usein suorituskykyyn liittyvä hintansa, sillä ne toimivat pääsäikeessä ja saattoivat joskus johtaa nykiviin kokemuksiin. Verkkoalusta on kehittynyt, ja tänään meillä on käytössämme vallankumouksellinen, suorituskykyinen ja deklaratiivinen ratkaisu, joka on sisäänrakennettu suoraan selaimeen: CSS:n vieritysohjatut animaatiot.

Tämä tehokas uusi moduuli antaa meille mahdollisuuden yhdistää animaation edistyminen suoraan säiliön vierityssijaintiin tai elementin näkyvyyteen näkymäikkunassa. Vaikka tämä on valtava harppaus eteenpäin, se esittelee uuden ajattelumallin. Yksi tärkeimmistä hallittavista osa-alueista on sen kontrollointi, miten animaatio käyttäytyy, kun käyttäjä vierittää eteen- tai taaksepäin. Miten saat elementin animoitumaan sisään vierittäessä alas ja animoitumaan ulos vierittäessä takaisin ylös? Vastaus piilee tutussa CSS-ominaisuudessa, jolle on annettu uusi, voimakas tarkoitus: animation-direction.

Tämä kattava opas vie sinut syväsukellukselle vieritysohjattujen animaatioiden virtauksen ja suunnan hallintaan. Tutkimme, miten animation-direction on saanut uuden käyttötarkoituksen, puramme sen toimintaa käytännön esimerkkien avulla ja varustamme sinut tiedoilla, joiden avulla voit rakentaa hienostuneita, suunnasta tietoisia käyttöliittymiä, jotka tuntuvat intuitiivisilta ja näyttävät upeilta.

Vieritysohjattujen animaatioiden perusteet

Ennen kuin voimme hallita animaatioidemme suuntaa, meidän on ensin ymmärrettävä niiden taustalla oleva ydinmekaniikka. Jos aihe on sinulle uusi, tämä osio toimii tärkeänä pohjustuksena. Jos olet jo tutustunut aiheeseen, se on erinomainen kertaus keskeisiin ominaisuuksiin.

Mitä ovat vieritysohjatut animaatiot?

Pohjimmiltaan vieritysohjattu animaatio on animaatio, jonka edistyminen ei ole sidottu kelloon (eli aikaan) vaan vieritysaikajanan edistymiseen. Sen sijaan, että animaatio kestäisi esimerkiksi 2 sekuntia, se kestää vieritystoiminnon ajan.

Kuvittele edistymispalkki blogikirjoituksen yläosassa. Perinteisesti käyttäisit JavaScriptiä kuuntelemaan vieritystapahtumia ja päivittämään palkin leveyttä. Vieritysohjattujen animaatioiden avulla voit yksinkertaisesti kertoa selaimelle: "Sido tämän edistymispalkin leveys koko sivun vierityssijaintiin." Selain hoitaa sitten kaikki monimutkaiset laskelmat ja päivitykset erittäin optimoidulla tavalla, usein pääsäikeen ulkopuolella, mikä johtaa täydellisen sulavaan animaatioon.

Keskeiset hyödyt ovat:

• Suorituskyky: Siirtämällä työtä pois pääsäikeestä vältämme ristiriidat muiden JavaScript-tehtävien kanssa, mikä johtaa sulavampiin, nykimättömiin animaatioihin.
• Yksinkertaisuus: Se, mikä aiemmin vaati kymmeniä rivejä JavaScriptiä, voidaan nyt saavuttaa muutamalla rivillä deklaratiivista CSS:ää.
• Parannettu käyttäjäkokemus: Animaatiot, joita käyttäjän syöte suoraan ohjaa, tuntuvat reagoivammilta ja sitouttavammilta, mikä luo tiiviimmän yhteyden käyttäjän ja käyttöliittymän välille.

Avaintekijät: `animation-timeline` ja aikajanat

Taika piilee animation-timeline-ominaisuudessa, joka kertoo animaatiolle, että sen tulee seurata vierityksen edistymistä kellon sijaan. On olemassa kaksi päätyyppiä aikajanoja, joihin törmäät:

1. Vierityksen edistymisaikajana: Tämä aikajana on yhdistetty vierityssijaintiin vierityssäiliön sisällä. Se seuraa edistymistä vieritysalueen alusta (0 %) loppuun (100 %).

Tämä määritellään scroll()-funktiolla:

animation-timeline: scroll(root); — Seuraa dokumentin näkymäikkunan (oletusvierityselementin) vierityssijaintia.

animation-timeline: scroll(nearest); — Seuraa lähimmän esi-isänä olevan vierityssäiliön vierityssijaintia.

Esimerkki: Yksinkertainen lukemisen edistymispalkki.

            
.progress-bar {
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: fill-progress auto linear;
  animation-timeline: scroll(root);
}

@keyframes fill-progress {
  to { transform: scaleX(1); }
}

            

              
                Copy
              
            
          

Tässä fill-progress-animaatiota ohjaa koko sivun vieritys. Kun vierität ylhäältä alas, animaatio etenee 0 %:sta 100 %:iin, skaalaten palkin 0:sta 1:een.

2. Näkymän edistymisaikajana: Tämä aikajana on yhdistetty elementin näkyvyyteen vierityssäiliön sisällä (usein kutsutaan näkymäikkunaksi). Se seuraa elementin matkaa, kun se tulee näkyviin, ylittää näkymän ja poistuu siitä.

Tämä määritellään view()-funktiolla:

animation-timeline: view();

Esimerkki: Elementti, joka ilmestyy näkyviin tullessaan.

            
.reveal-on-scroll {
  opacity: 0;
  animation: fade-in auto linear;
  animation-timeline: view();
}

@keyframes fade-in {
  to { opacity: 1; }
}

            

              
                Copy
              
            
          

Tässä tapauksessa fade-in-animaatio alkaa, kun elementti alkaa tulla näkymäikkunaan, ja päättyy, kun se on täysin näkyvissä. Aikajanan edistyminen on suoraan sidottu tähän näkyvyyteen.

Ydinkonsepti: Animaation suunnan hallinta

Nyt kun ymmärrämme perusteet, käsittelemme keskeistä kysymystä: miten saamme nämä animaatiot reagoimaan vierityksen suuntaan? Käyttäjä vierittää alas, ja elementti ilmestyy näkyviin. Kun hän vierittää takaisin ylös, elementin pitäisi hävitä näkyvistä. Tämä kaksisuuntainen toiminnallisuus on välttämätöntä intuitiivisten käyttöliittymien luomiseksi. Tässä kohtaa animation-direction tekee suuren paluunsa.

`animation-direction`-ominaisuuden tarkastelu

Perinteisissä, aikapohjaisissa CSS-animaatioissa animation-direction hallitsee, miten animaatio etenee avainruutujensa läpi useiden toistojen aikana. Saatat tuntea sen arvot:

• normal: Toistaa eteenpäin 0 %:sta 100 %:iin jokaisella toistolla. (Oletus)
• reverse: Toistaa taaksepäin 100 %:sta 0 %:iin jokaisella toistolla.
• alternate: Toistaa eteenpäin ensimmäisellä toistolla, taaksepäin toisella, ja niin edelleen.
• alternate-reverse: Toistaa taaksepäin ensimmäisellä toistolla, eteenpäin toisella, ja niin edelleen.

Kun käytät vieritysaikajanaa, "toistojen" ja "syklien" käsite suurelta osin katoaa, koska animaation edistyminen on suoraan sidottu yhteen, jatkuvaan aikajanaan (esim. vieritys ylhäältä alas). Selain nerokkaasti uudelleenkäyttää animation-direction-ominaisuutta määrittelemään suhteen aikajanan edistymisen ja animaation edistymisen välillä.

Uusi ajattelumalli: Aikajanan edistyminen vs. animaation edistyminen

Ymmärtääksesi tämän täysin, sinun on lakattava ajattelemasta aikaa ja alettava ajatella aikajanan edistymisenä. Vieritysaikajana etenee 0 %:sta (vieritysalueen yläosa) 100 %:iin (vieritysalueen alaosa).

• Vieritys alas/eteenpäin: Kasvattaa aikajanan edistymistä (esim. 10 %:sta 50 %:iin).
• Vieritys ylös/taaksepäin: Vähentää aikajanan edistymistä (esim. 50 %:sta 10 %:iin).

animation-direction sanelee nyt, miten @keyframes-sääntösi vastaavat tätä aikajanan edistymistä.

animation-direction: normal; (Oletus)

Tämä luo suoran, 1-1-vastaavuuden.

• Kun aikajanan edistyminen on 0 %, animaatio on 0 %:n avainruudussaan.
• Kun aikajanan edistyminen on 100 %, animaatio on 100 %:n avainruudussaan.

Joten, kun vierität alas, animaatio toistuu eteenpäin. Kun vierität ylös, aikajanan edistyminen vähenee, joten animaatio toistuu käytännössä takaperin. Tämä on se taika! Kaksisuuntainen toiminnallisuus on sisäänrakennettu. Sinun ei tarvitse tehdä mitään ylimääräistä.

animation-direction: reverse;

Tämä luo käänteisen vastaavuuden.

• Kun aikajanan edistyminen on 0 %, animaatio on 100 %:n avainruudussaan.
• Kun aikajanan edistyminen on 100 %, animaatio on 0 %:n avainruudussaan.

Tämä tarkoittaa, että kun vierität alas, animaatio toistuu takaperin (lopputilastaan alkutilaansa). Kun vierität ylös, aikajanan edistyminen vähenee, mikä saa animaation toistumaan eteenpäin (alkutilastaan kohti lopputilaansa).

Tämä yksinkertainen vaihto on uskomattoman tehokas. Katsotaanpa sitä toiminnassa.

Käytännön toteutus ja esimerkit

Teoria on hienoa, mutta rakennetaanpa joitakin todellisen maailman esimerkkejä näiden käsitteiden vakiinnuttamiseksi. Suurimmassa osassa näistä käytämme view()-aikajanaa, koska se on yleinen käyttöliittymäelementeille, jotka animoituvat ilmestyessään ruudulle.

Skenaario 1: Klassinen "Paljasta vierittäessä" -efekti

Tavoite: Elementti ilmestyy näkyviin ja liukuu ylös, kun vierität sen kohdalle. Kun vierität takaisin ylös, sen pitäisi hävitä näkyvistä ja liukua takaisin alas.

Tämä on yleisin käyttötapaus ja se toimii täydellisesti oletusarvoisella normal-suunnalla.

HTML:

            <div class="content-box reveal">
  <h3>Vieritä alas</h3>
  <p>Tämä laatikko animoituu näkyviin.</p>
</div>
            

              
                Copy
              
            
          

CSS:

            @keyframes fade-and-slide-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  /* Aloita animaation 'from'-tilasta */
  opacity: 0;
  
  animation: fade-and-slide-in linear forwards;
  animation-timeline: view();
  /* animation-direction: normal; on oletus, joten sitä ei tarvita */
}

            

              
                Copy
              
            
          

Miten se toimii:

1. Määrittelemme avainruudut nimeltä fade-and-slide-in, jotka vievät elementin läpinäkyvästä ja alempaa (translateY(50px)) täysin näkyväksi ja alkuperäiseen asentoonsa (translateY(0)).
2. Sovellamme tätä animaatiota .reveal-elementtiimme ja, mikä tärkeintä, yhdistämme sen view()-aikajanaan. Käytämme myös animation-fill-mode: forwards; varmistaaksemme, että elementti pysyy lopputilassaan aikajanan päätyttyä.
3. Koska suunta on normal, kun elementti alkaa tulla näkymäikkunaan (aikajanan edistyminen > 0 %), animaatio alkaa toistua eteenpäin.
4. Kun vierität alas, elementti tulee näkyvämmäksi, aikajanan edistyminen kasvaa ja animaatio siirtyy kohti `to`-tilaansa.
5. Jos vierität takaisin ylös, elementti tulee vähemmän näkyväksi, aikajanan edistyminen *vähenee*, ja selain kääntää automaattisesti animaation suunnan, saaden sen häviämään ja liukumaan alas. Saat kaksisuuntaisen hallinnan ilmaiseksi!

Skenaario 2: "Kelaus takaisin" tai "Uudelleen kokoaminen" -efekti

Tavoite: Elementti alkaa hajotetusta tai lopputilastaan, ja kun vierität alas, se animoituu alkuperäiseen, koottuun tilaansa.

Tämä on täydellinen käyttötapaus animation-direction: reverse; -ominaisuudelle. Kuvittele otsikko, jossa kirjaimet alkavat hajallaan ja kokoontuvat yhteen vierittäessäsi.

HTML:

            <h1 class="title-reassemble">
  <span>H</span><span>E</span><span>L</span><span>L</span><span>O</span>
</h1>
            

              
                Copy
              
            
          

CSS:

            @keyframes scatter-letters {
  from {
    /* Koottu tila */
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  to {
    /* Hajotettu tila */
    transform: translate(var(--x), var(--y)) rotate(360deg);
    opacity: 0;
  }
}

.title-reassemble span {
  display: inline-block;
  animation: scatter-letters linear forwards;
  animation-timeline: view(block);
  animation-direction: reverse; /* Avainainesosa! */
}

/* Määritä satunnaiset loppusijainnit jokaiselle kirjaimelle */
.title-reassemble span:nth-child(1) { --x: -150px; --y: 50px; }
.title-reassemble span:nth-child(2) { --x: 80px; --y: -40px; }
/* ... ja niin edelleen muille kirjaimille */

            

              
                Copy
              
            
          

Miten se toimii:

1. Avainruutumme, scatter-letters, määrittelevät animaation kootusta tilasta (`from`) hajanaiseen tilaan (`to`).
2. Sovellamme tätä animaatiota jokaiseen kirjain-spaniin ja yhdistämme sen view()-aikajanaan.
3. Asetamme animation-direction: reverse;. Tämä kääntää vastaavuuden.
4. Kun otsikko on ruudun ulkopuolella (aikajanan edistyminen on 0 %), animaatio pakotetaan 100 %:n tilaansa (`to`-avainruutu), joten kirjaimet ovat hajallaan ja näkymättömiä.
5. Kun vierität alas ja otsikko tulee näkymäikkunaan, aikajana etenee kohti 100 %. Koska suunta on käänteinen, animaatio toistuu 100 %:n avainruudustaan *taaksepäin* kohti 0 %:n avainruutuaan.
6. Tulos: kirjaimet lentävät sisään ja kokoontuvat, kun vierität ne näkyviin. Vierittäminen takaisin ylös lähettää ne lentämään jälleen erilleen.

Skenaario 3: Kaksisuuntainen kierto

Tavoite: Hammasratas-ikoni pyörii myötäpäivään vieritettäessä alas ja vastapäivään vieritettäessä ylös.

Tämä on toinen suoraviivainen sovellus oletusarvoisesta normal-suunnasta.

HTML:

            <div class="icon-container">
  <img src="gear.svg" class="spinning-gear" alt="Pyörivä hammasratas -ikoni" />
</div>
            

              
                Copy
              
            
          

CSS:

            @keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinning-gear {
  animation: spin linear;
  /* Kiinnitä koko dokumentin vieritykseen jatkuvan vaikutuksen aikaansaamiseksi */
  animation-timeline: scroll(root);
}

            

              
                Copy
              
            
          

Miten se toimii:

Kun vierität sivua alas, juurivieritysaikajana etenee 0 %:sta 100 %:iin. normal-animaatiosuunnan myötä tämä vastaa suoraan `spin`-avainruutuja, saaden hammasrattaan pyörimään 0:sta 360 asteeseen (myötäpäivään). Kun vierität takaisin ylös, aikajanan edistyminen vähenee, ja animaatio toistetaan käänteisesti, saaden hammasrattaan pyörimään 360:sta takaisin 0 asteeseen (vastapäivään). Se on elegantin yksinkertaista.

Edistyneet virtauksen ohjaustekniikat

normal- ja reverse-suuntien hallinta on 90 % taistelusta. Mutta luovan potentiaalin täydelliseksi avaamiseksi sinun on yhdistettävä suunnan hallinta aikajanan alueen hallintaan.

Aikajanan hallinta: `animation-range`

Oletusarvoisesti view()-aikajana alkaa, kun elementti ("kohde") tulee vieritysporttiin ja päättyy, kun se on kokonaan ohittanut sen. animation-range-*-ominaisuudet antavat sinun määrittää tämän alku- ja loppupisteen uudelleen.

animation-range-start: [phase] [offset];

animation-range-end: [phase] [offset];

`phase`-arvo voi olla esimerkiksi:

• entry: Hetki, jolloin kohde alkaa tulla vieritysporttiin.
• cover: Hetki, jolloin kohde on kokonaan vieritysportin sisällä.
• contain: Hetki, jolloin kohde sisältää kokonaan vieritysportin (suurille elementeille).
• exit: Hetki, jolloin kohde alkaa poistua vieritysportista.

Hienosäädetään "Paljasta vierittäessä" -esimerkkiämme. Entä jos haluamme sen animoituvan vain, kun se on ruudun keskellä?

CSS:

            .reveal-in-middle {
  animation: fade-and-slide-in linear forwards;
  animation-timeline: view();
  animation-direction: normal;

  /* Uudet lisäykset alueen hallintaan */
  animation-range-start: entry 25%;
  animation-range-end: exit 75%;
}

            

              
                Copy
              
            
          

Miten se toimii:

• animation-range-start: entry 25%; tarkoittaa, että animaatio (ja sen aikajana) ei ala entry-vaiheen alussa. Se odottaa, kunnes elementti on 25 % matkastaan näkymäikkunan sisällä.
• animation-range-end: exit 75%; tarkoittaa, että animaation katsotaan olevan 100 % valmis, kun elementistä on jäljellä enää 75 % ennen täydellistä poistumista.
• Tämä luo tehokkaasti pienemmän "aktiivisen alueen" animaatiolle näkymäikkunan keskelle. Animaatio tapahtuu nopeammin ja keskitetymmin. Suunnasta riippuva toiminta toimii edelleen täydellisesti tämän uuden, rajoitetun alueen sisällä.

Ajattelu aikajanan edistymisen kautta: Yhdistävä teoria

Jos joskus hämmennyt, palaa tähän ydinmalliin:

1. Määritä aikajana: Seuraatko koko sivua (scroll()) vai elementin näkyvyyttä (view())?
2. Määritä alue: Milloin tämä aikajana alkaa (0 %) ja päättyy (100 %)? (Käyttäen animation-range-ominaisuutta).
3. Kartoita animaatio: Miten avainruutusi vastaavat tätä 0 %–100 % aikajanan edistymistä? (Käyttäen animation-direction-ominaisuutta).

• normal: 0 % aikajana -> 0 % avainruudut.
• reverse: 0 % aikajana -> 100 % avainruudut.

Eteenpäin vierittäminen kasvattaa aikajanan edistymistä. Taaksepäin vierittäminen vähentää sitä. Kaikki muu seuraa näistä yksinkertaisista säännöistä.

Selaintuki, suorituskyky ja parhaat käytännöt

Kuten minkä tahansa huippuluokan verkkoteknologian kanssa, on tärkeää ottaa huomioon toteutuksen käytännön näkökohdat.

Nykyinen selaintuki

Loppuvuodesta 2023 CSS:n vieritysohjatut animaatiot ovat tuettuja Chromium-pohjaisissa selaimissa (Chrome, Edge) ja ovat aktiivisen kehityksen alla Firefoxissa ja Safarissa. Tarkista aina ajantasaiset resurssit, kuten CanIUse.com, viimeisimmän tukitiedon saamiseksi.

Toistaiseksi näitä animaatioita tulisi kohdella progressiivisena parannuksena. Sivuston on oltava täysin toimiva ilman niitä. Voit käyttää @supports-sääntöä soveltaaksesi niitä vain selaimissa, jotka ymmärtävät syntaksin:

            /* Oletustyylit kaikille selaimille */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Sovella animaatioita vain, jos ne ovat tuettuja */
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0; /* Aseta alkutila animaatiota varten */
    animation: fade-and-slide-in linear forwards;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

Suorituskykyyn liittyviä huomioita

Tämän teknologian suurin voitto on suorituskyky. Tämä hyöty toteutuu kuitenkin täysin vain, jos animoit oikeita ominaisuuksia. Mahdollisimman sulavan kokemuksen saavuttamiseksi pidättäydy animoimasta ominaisuuksia, jotka selaimen komposointisäie voi käsitellä ja jotka eivät aiheuta asettelun uudelleenlaskentaa tai uudelleenpiirtoa.

• Erinomaiset valinnat: transform, opacity.
• Käytä varoen: color, background-color.
• Vältä jos mahdollista: width, height, margin, top, left (ominaisuudet, jotka vaikuttavat muiden elementtien asetteluun).

Saavutettavuuden parhaat käytännöt

Animaatio lisää näyttävyyttä, mutta se voi olla häiritsevää tai jopa haitallista joillekin käyttäjille, erityisesti niille, joilla on vestibulaarisia häiriöitä. Kunnioita aina käyttäjän mieltymyksiä.

Käytä prefers-reduced-motion-mediakyselyä poistaaksesi animaatiot käytöstä tai vähentääksesi niitä.

            @media (prefers-reduced-motion: reduce) {
  .reveal, .spinning-gear, .title-reassemble span {
    animation: none;
    opacity: 1; /* Varmista, että elementit ovat oletusarvoisesti näkyvissä */
    transform: none; /* Nollaa kaikki muunnokset */
  }
}

            

              
                Copy
              
            
          

Varmista lisäksi, että animaatiot ovat koristeellisia eivätkä välitä kriittistä tietoa, joka ei ole saatavilla muulla tavoin.

Johtopäätös

CSS:n vieritysohjatut animaatiot edustavat paradigman muutosta siinä, miten rakennamme dynaamisia verkkokäyttöliittymiä. Siirtämällä animaation hallinnan JavaScriptistä CSS:ään saamme valtavia suorituskykyhyötyjä ja deklaratiivisemman, ylläpidettävämmän koodikannan.

Avain niiden täyden potentiaalin avaamiseen piilee virtauksen hallinnan ymmärtämisessä ja hallitsemisessa. Kuvittelemalla animation-direction-ominaisuuden uudelleen ei toistojen hallitsijana, vaan aikajanan edistymisen ja animaation edistymisen välisenä kartoittajana, saamme vaivattoman kaksisuuntaisen hallinnan. Oletusarvoinen normal-käyttäytyminen tarjoaa yleisimmän mallin – animointi eteenpäin vieritettäessä eteenpäin ja taaksepäin vieritettäessä taaksepäin – kun taas reverse antaa meille voiman luoda vaikuttavia "peruutus"- tai "takaisinkelaus"-efektejä.

Selaintuen kasvaessa nämä tekniikat siirtyvät progressiivisesta parannuksesta modernien frontend-kehittäjien perustaidoksi. Aloita siis kokeileminen tänään. Mieti uudelleen vierityspohjaisia vuorovaikutuksiasi ja katso, miten voit korvata monimutkaisen JavaScriptin muutamalla rivillä eleganttia, suorituskykyistä ja suunnasta tietoista CSS:ää.