Enamat kui sujuv: Kohandatud kerimisanimatsiooni kõverate meisterlik valdamine CSS-is

Aastaid on veebiarendajad püüdnud kontrollida seda ühte interaktsiooni, mis veebi defineerib: kerimist. Omaduse scroll-behavior: smooth; kasutuselevõtt oli monumentaalne samm edasi, muutes järsud lehehüpped graatsiliseks libisemiseks. Kuid sellel universaalsel lahendusel puudub loomingulise ja kasutajakeskse disaini jaoks ülioluline element: kontroll. Veebilehitseja vaikimisi leevenduskõver on fikseeritud, pakkumata ruumi brändi väljendamiseks, nüansseeritud kasutajate tagasisideks või unikaalseks interaktiivseks loo jutustamiseks.

Mis oleks, kui saaksite oma kerimise täpse füüsika ise määratleda? Kujutage ette kerimist, mis algab aeglaselt, kiireneb järsult ja seejärel maandub õrnalt oma kohale. Või mängulist, põrkavat efekti loomingulise portfoolio jaoks. Selline detailne kontroll kerimise interpolatsiooni üle – animatsioonikõver, mis dikteerib kerimise kiirust selle kestuse jooksul – on ajalooliselt olnud keerukate ja jõudlust nõudvate JavaScripti teekide pärusmaa.

See ajastu on lõppemas. CSS-i kerimispõhiste animatsioonide spetsifikatsiooni tulekuga on arendajatel nüüd olemas natiivsed ja jõudsad tööriistad animatsioonide orkestreerimiseks kerimise edenemise põhjal. See juhend viib teid sügavale sellesse uude valdkonda, keskendudes sellele, kuidas kasutada omadusi nagu animation-timeline kohandatud kerimisanimatsiooni kõverate loomiseks, liikudes kaugele kaugemale binaarsest valikust 'auto' või 'smooth'.

Kiire meeldetuletus: scroll-behavior: smooth ajastu

Enne tuleviku uurimist hindame minevikku. Omadus scroll-behavior on lihtne, kuid võimas CSS-reegel, mis dikteerib kerimise käitumist, kui selle käivitab navigeerimine, näiteks ankurlingile klõpsamine.

Selle rakendamine on lihtne:

            html {
  scroll-behavior: smooth;
}
            

              
                Copy
              
            
          

Selle ühe reaga animeerib igasugune lehesisene navigeerimine (nt klõpsates <a href="#section2">) vaateakna sujuvalt sihtelemendini, selle asemel et koheselt hüpata. See oli tohutu võit kasutajakogemuse (UX) jaoks, pakkudes ruumilist konteksti ja vähem segadust tekitavat teekonda läbi veebilehe.

Olemuslik piirang

Omaduse scroll-behavior: smooth; peamine puudus on selle paindumatus. Animatsiooni kestus ja leevenduskõver on veebilehitseja tootja poolt ette määratud. Puudub CSS-omadus, mis muudaks selle kiiremaks, aeglasemaks või rakendaks kohandatud ajastusfunktsiooni nagu cubic-bezier(). See tähendab, et iga sujuv kerimine igal veebisaidil tundub suures osas sama – usaldusväärne, kuid inspireerimatu kogemus.

Uus paradigma: CSS-i kerimispõhised animatsioonid

CSS-i kerimispõhiste animatsioonide spetsifikatsioon muudab meie suhet kerimisega fundamentaalselt. Selle asemel, et lihtsalt käivitada eelnevalt määratletud animatsioon, võimaldab see meil siduda animatsiooni edenemise otse kerimiskonteineri edenemisega. See tähendab, et animatsioon võib olla 0% lõpetatud, kui kasutaja on lehe ülaosas, ja 100% lõpetatud, kui ta on kerinud lehe allossa.

See saavutatakse uute CSS-i omaduste abil, peamiselt animation-timeline. See omadus ütleb animatsioonile, et see ei tuletaks oma ajastust kella järgi (vaikimisi käitumine), vaid kerimisriba asukoha järgi.

Saate kasutada kahte peamist ajajoont:

• scroll(): Seob animatsiooni konteineri elemendi kerimise edenemisega. Elemendi kerimisel animatsioon edeneb.
• view(): Seob animatsiooni kindla elemendi edenemisega, kui see liigub läbi vaateakna. See on uskumatult võimas efektide jaoks, nagu elementide ilmumine ekraanile tulekul.

Selleks, et luua lehe kogu kerimiskogemusele kohandatud "tunnetust", keskendume tugevalt nendele uutele tööriistadele. Need võimaldavad meil luua efekte, mis tunduvad nagu kohandatud kerimise interpolatsioon, kuigi tehniliselt animeerime teisi omadusi sünkroonis kerimisega.

Kohandatud kõverate avamine: animation-timing-function roll

Siin on peamine arusaam: kuigi animation-timeline seob kerimisriba animatsiooni edenemisega, on animation-timing-function see omadus, mis võimaldab meil määratleda kohandatud interpolatsioonikõvera!

Tavaliselt rakendub animation-timing-function sekundites mõõdetava kestuse jooksul. Kerimispõhises animatsioonis rakendub see kerimise ajajoone kestuse jooksul. See tähendab, et meie defineeritud leevenduskõver dikteerib, kuidas animeeritud omadus muutub kasutaja kerimisel.

Illustreerime seda lihtsa näitega: kerimise edenemisriba.

Näide 1: Kohandatud leevendusega edenemisriba

Lineaarne edenemisriba on levinud kasutusjuht. Kuid saame selle kohandatud kõveraga dünaamilisemaks muuta.

HTML struktuur

            <div id="progress-bar"></div>
<main>
  <!-- Your page content goes here -->
</main>
            

              
                Copy
              
            
          

CSS implementatsioon

            /* Edenemisriba põhistiilid */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 8px;
  background-color: #007BFF;
  width: 100%;

  /* Algselt on see X-teljel skaleeritud 0-ni */
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Animatsiooni definitsioon */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Maagia, mis kõik kokku seob */
#progress-bar {
  /* Rakenda animatsioon */
  animation: grow-progress linear;

  /* Seo animatsioon dokumendi kerimise ajajoonega */
  animation-timeline: scroll(root block);

  /* 
    SEE ON KOHANDATUD KÕVER! 
    Lineaarne asemel proovime ease-out kõverat. 
    Edenemine on alguses kiire ja aeglustub lõpus.
  */
  animation-timing-function: cubic-bezier(0, 0, 0.4, 1.1);
}
            

              
                Copy
              
            
          

Lahtiseletatult

1. @keyframes grow-progress: Määratleme standardse animatsiooni, mis skaleerib elementi X-teljel 0-st 1-ni.
2. animation: grow-progress linear;: Rakendame selle animatsiooni. Märksõna `linear` on siin lihtsalt kohatäide; selle kirjutab üle meie spetsiifilisem `animation-timing-function`.
3. animation-timeline: scroll(root block);: See on kerimispõhise mehaanika tuum. See ütleb `grow-progress` animatsioonile, et see ei jookseks taimeriga, vaid järgiks juurdokumendi (`root`) kerimisriba selle vertikaalsel teljel (`block`).
4. animation-timing-function: cubic-bezier(...): Siin määratleme oma kohandatud interpolatsiooni. Selle asemel, et edenemisriba kasvaks lineaarselt koos kerimisega, järgib see nüüd meie `cubic-bezier` kõveraga määratletud kiirust. See kasvab kiiresti kerimise alguses ja aeglustub, kui kasutaja jõuab lehe lõppu. See peen muudatus võib muuta interaktsiooni palju lihvitumaks ja reageerivamaks.

Keerukate kogemuste loomine: `view()` ajajoon ja parallaks

Ajajoon `view()` on veelgi võimsam. See jälgib elementi selle liikumisel läbi nähtava vaateakna. See on ideaalne sisenemisanimatsioonide, parallaks-efektide ja muude interaktsioonide loomiseks, mis sõltuvad elemendi nähtavusest.

Loome mittelineaarse parallaks-efekti, kus pildi erinevad kihid liiguvad erineva kiirusega, igaühel oma kohandatud leevenduskõver.

Näide 2: Unikaalse interpolatsiooniga parallaks

HTML struktuur

            <div class="parallax-container">
  <img src="foreground.png" class="parallax-layer foreground" alt="Foreground element">
  <img src="midground.png" class="parallax-layer midground" alt="Midground element">
  <img src="background.png" class="parallax-layer background" alt="Background element">
  <h2 class="parallax-title">Scroll to Discover</h2>
</div>
            

              
                Copy
              
            
          

CSS implementatsioon

            .parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden; /* Oluline kihtide hoidmiseks */
}

.parallax-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Määratle ühine võtmekaader liikumiseks */
@keyframes move-up {
  from { transform: translateY(0); }
  to { transform: translateY(-100px); }
}

/* Rakenda animatsioonid erinevate kõverate ja vahemikega */
.foreground {
  animation: move-up linear;
  animation-timeline: view(); /* Jälgib selle elemendi teekonda läbi vaateakna */
  animation-range: entry 0% exit 100%;
  /* Agressiivne ease-in: hakkab liikuma aeglaselt, seejärel väga kiiresti */
  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transform: translateY(50px); /* Algne nihe */
}

.midground {
  animation: move-up linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
  /* Klassikaline ease-in-out kõver */
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transform: translateY(20px); /* Väiksem algne nihe */
}

.background {
  /* See kiht liigub sügavuse loomiseks väga vähe või üldse mitte */
}

.parallax-title {
  animation: move-up linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
  /* Väljendusrikka teksti jaoks põrkav, ülevõimendatud kõver */
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: translateY(0); 
}
            

              
                Copy
              
            
          

Parallaks-efekti lahkamine

• animation-timeline: view();: Iga kihi animatsioon on seotud selle enda nähtavusega vaateaknas.
• animation-range: See omadus määratleb animatsiooni algus- ja lõpp-punktid vaate ajajoonel. `entry 0% exit 100%` tähendab, et animatsioon algab, kui element hakkab vaateaknasse sisenema, ja lõpeb, kui see on täielikult väljunud.
• Erinevad animation-timing-function'id: See on võti. Esiplaan liigub kiire, agressiivse kõveraga. Keskplaan liigub standardse, sujuva kõveraga. Pealkirjal on mänguline põrge. Kuna igal kihil on erinev interpolatsioonikõver, on tulemuseks saadav parallaks-efekt rikkalik, dünaamiline ja palju kaasahaaravam kui lineaarse kiirusega efekt.

Jõudluse kaalutlused: Komposiitor on sinu sõber

Üks olulisemaid eeliseid CSS-i kerimispõhiste animatsioonide ees JavaScriptil põhinevate lahenduste ees on jõudlus. Enamik kaasaegseid veebilehitsejaid suudab teatud omaduste – nimelt transform ja opacity – animatsioonid delegeerida eraldi protsessile, mida nimetatakse komposiitori lõimeks.

See on mängumuutev, sest:

• See ei blokeeri: Põhilõim, mis tegeleb JavaScripti, paigutuse ja renderdamisega, ei ole kaasatud. See tähendab, et isegi kui teie sait käitab raskeid skripte, jäävad teie kerimisanimatsioonid siidisujuvaks.
• See on tõhus: Komposiitor on kõrgelt optimeeritud sisu bittkaartide ekraanil liigutamiseks, mis viib madalama protsessori/graafikaprotsessori kasutuse ja parema aku kestvuseni mobiilseadmetes.

Optimaalse jõudluse tagamiseks pidage kinni transform (translate, scale, rotate) ja opacity animeerimisest, kui vähegi võimalik. Paigutust mõjutavate omaduste, nagu width, height või margin, animeerimine sunnib veebilehitseja tagasi põhilõime juurde, mis võib potentsiaalselt põhjustada hakkimist ja nullida jõudluse eelised.

Veebilehitsejate tugi ja progressiivne täiustamine

2023. aasta lõpu seisuga on CSS-i kerimispõhised animatsioonid toetatud Chromiumil põhinevates veebilehitsejates (Google Chrome, Microsoft Edge) alates versioonist 115. Tugi Firefoxis ja Safaris on aktiivses arenduses ja seda saab sageli lubada eksperimentaalsete lippude kaudu.

Arvestades segast tuge, on ülioluline neid funktsioone rakendada progressiivse täiustamise abil. @supports at-reegel on siin teie parim sõber.

            /* Vaikestiilid kõikidele veebilehitsejatele */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
  /* JavaScriptiga lülitatav tagavaravariant-klass (nt IntersectionObserveriga) */
  opacity: 1;
  transform: translateY(0);
}

/* Täiustatud kogemus toetavatele veebilehitsejatele */
@supports (animation-timeline: view()) {
  .reveal-on-scroll {
    /* Lähtesta animatsiooni algolek */
    opacity: 1;
    transform: translateY(0);

    /* Määratle kerimispõhine animatsioon */
    animation: fade-in-up linear;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }

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

  /* Me ei vaja enam JS-põhist klassi */
  .reveal-on-scroll.is-visible {
    opacity: 1; /* Või milline iganes lõppolek peaks olema */
  }
}
            

              
                Copy
              
            
          

Selles näites saavad vanemad veebilehitsejad täiesti vastuvõetava sissehajumise efekti, mida haldab väike kogus JavaScripti. Kaasaegsed, toetavad veebilehitsejad saavad ülijõudsa, kerimisega seotud CSS-versiooni, mis ei vaja animatsiooni enda jaoks JavaScripti.

Juurdepääsetavus ei ole läbiräägitav: `prefers-reduced-motion`

Suure võimuga kaasneb suur vastutus. Keerulised ja kiired animatsioonid võivad olla segadust tekitavad või isegi füüsiliselt kahjulikud vestibulaarsüsteemi häiretega kasutajatele, põhjustades pearinglust, iiveldust ja peavalu.

On absoluutselt hädavajalik austada kasutaja eelistust vähendatud liikumise osas. Meediapäring prefers-reduced-motion võimaldab meil seda teha.

Pange oma kerimispõhised animatsioonid alati sellesse meediapäringusse:

            @media (prefers-reduced-motion: no-preference) {
  .parallax-layer, .progress-bar, .reveal-on-scroll {
    /* Kõik teie kerimispõhised animatsioonireeglid käivad siin */
    animation-timeline: view();
    /* etc. */
  }
}
            

              
                Copy
              
            
          

Kui kasutaja on oma operatsioonisüsteemis lubanud "vähenda liikumist" sätte, ei rakendata selle meediapäringu sees olevaid animatsioone. Sait jääb täiesti funktsionaalseks, kuid ilma potentsiaalselt problemaatiliste liikumisefektideta. See on lihtne ja sügavalt oluline samm kaasavate ja juurdepääsetavate veebikogemuste loomisel.

Kokkuvõte: Uue ajastu koidik veebiinteraktsioonis

Võime defineerida kohandatud animatsioonikõveraid, mis on seotud kerimisega, on rohkem kui uudsus; see on fundamentaalne nihe selles, kuidas saame veebi jaoks disainida ja ehitada. Me liigume jäikade, eelnevalt määratletud kerimiskäitumiste maailmast väljendusrikaste, jõudaste ja kunstiliselt suunatud interaktsioonide maailma.

Valdades animation-timeline, view() ja animation-timing-function, saate:

• Parandada kasutajakogemust: Looge intuitiivseid ja informatiivseid üleminekuid, mis juhatavad kasutajat läbi teie sisu.
• Tõsta jõudlust: Asendage rasked JavaScripti teegid natiivse CSS-iga sujuvamate ja tõhusamate animatsioonide jaoks.
• Tugevdada brändi väljendust: Lisage oma veebisaidi interaktsioonidele isikupära, mis peegeldab teie brändi identiteeti.
• Ehitada vastutustundlikult: Kasutage progressiivset täiustamist ja juurdepääsetavuse parimaid tavasid, et tagada suurepärane kogemus kõikidele kasutajatele, kõikides seadmetes.

Veeb ei ole enam lihtsalt dokument, mida lugeda; see on ruum, mida kogeda. Sukelduge sisse, katsetage erinevate cubic-bezier() kõveratega ja hakake looma kerimiskogemusi, mis pole mitte ainult sujuvad, vaid tõeliselt meeldejäävad.