CSS Animation Range apgūšana: precīzas, ar ritināšanu vadītas animācijas robežas

Dinamiskajā tīmekļa izstrādes pasaulē lietotāja pieredze ir vissvarīgākā. Interaktīvas un saistošas saskarnes vairs nav tikai greznība; tās ir gaidītas. Gadiem ilgi sarežģītu, ar ritināšanu vadītu animāciju — kur elementi dinamiski reaģē uz lietotāja ritināšanas darbībām — izveide bieži vien prasīja paļauties uz sarežģītām JavaScript bibliotēkām. Lai gan šie risinājumi bija jaudīgi, tie dažkārt radīja veiktspējas problēmas un palielināja izstrādes sarežģītību.

Iepazīstieties ar CSS Animation Range — revolucionāru papildinājumu CSS Scroll-Driven Animations modulim. Šī revolucionārā funkcija ļauj izstrādātājiem definēt precīzas robežas, kad animācijai jāsākas un jābeidzas noteiktā ritināšanas laika skalā, un tas viss notiek tieši CSS. Tas ir deklaratīvs, veiktspējīgs un elegants veids, kā atdzīvināt savu tīmekļa dizainu, piedāvājot detalizētu kontroli pār ritināšanas efektiem, kas iepriekš bija apgrūtinoši vai neiespējami, izmantojot tikai CSS.

Šajā visaptverošajā rokasgrāmatā mēs iedziļināsimies CSS Animation Range smalkumos. Mēs izpētīsim tās pamatjēdzienus, analizēsim tās īpašības, demonstrēsim praktiskus pielietojumus, apspriedīsim progresīvas tehnikas un sniegsim labākās prakses piemērus tās nevainojamai integrācijai jūsu globālajos tīmekļa projektos. Noslēgumā jūs būsiet apguvis šo jaudīgo rīku, lai radītu patiesi aizraujošu un veiktspējīgu, ar ritināšanu vadītu pieredzi lietotājiem visā pasaulē.

Izpratne par ar ritināšanu vadītu animāciju pamatjēdzieniem

Pirms mēs analizējam animation-range, ir svarīgi saprast plašāku CSS Scroll-Driven Animations kontekstu un problēmas, kuras tās risina.

Ar ritināšanu vadītu animāciju evolūcija

Vēsturiski, lai panāktu ar ritināšanu saistītus efektus tīmeklī, bija nepieciešams ievērojams JavaScript daudzums. Bibliotēkas, piemēram, GSAP ScrollTrigger, ScrollMagic vai pat pielāgotas Intersection Observer implementācijas, kļuva par neaizstājamiem rīkiem izstrādātājiem. Lai gan šīs bibliotēkas piedāvāja milzīgu elastību, tām bija noteikti kompromisi:

• Veiktspēja: JavaScript balstīti risinājumi, īpaši tie, kas bieži pārrēķina pozīcijas ritināšanas laikā, dažkārt varēja izraisīt raustīšanos vai mazāk plūstošas animācijas, īpaši uz zemākas klases ierīcēm vai sarežģītās lapās.
• Sarežģītība: Šo bibliotēku integrēšana un pārvaldīšana pievienoja papildu koda slāņus, palielinot mācīšanās līkni un kļūdu iespējamību.
• Deklaratīvs pret imperatīvu: JavaScript bieži prasa imperatīvu pieeju ("dari šo, kad notiek tas"), savukārt CSS pēc būtības piedāvā deklaratīvu stilu ("šim elementam vajadzētu izskatīties šādi šajos apstākļos"). Vietējie CSS risinājumi labāk atbilst pēdējam.

CSS Scroll-Driven Animations parādīšanās ir nozīmīga pāreja uz vietējāku, veiktspējīgāku un deklaratīvāku pieeju. Pārvirzot šīs animācijas uz pārlūkprogrammas renderēšanas dzinēju, izstrādātāji var sasniegt plūstošākus efektus ar mazāku koda apjomu.

Iepazīstinām ar animation-timeline

CSS Scroll-Driven Animations pamatā ir animation-timeline īpašība. Fiksēta laika ilguma vietā animation-timeline ļauj animācijai progresēt, pamatojoties uz norādītā elementa ritināšanas pozīciju. Tā pieņem divas galvenās funkcijas:

• scroll(): Šī funkcija izveido ritināšanas progresa laika skalu. Jūs varat norādīt, kura elementa ritināšanas pozīcijai jāvirza animācija. Piemēram, scroll(root) attiecas uz dokumenta galveno ritināšanas konteineru, savukārt scroll(self) attiecas uz pašu elementu, ja tas ir ritināms. Šī laika skala seko progresam no sākuma (0%) līdz beigām (100%) ritināmajā apgabalā.
• view(): Šī funkcija izveido skata progresa laika skalu. Atšķirībā no scroll(), kas seko visam ritināmajam diapazonam, view() seko elementa redzamībai tā ritināšanas konteinerā (parasti skatlogā). Animācija progresē, kad elements ienāk, šķērso un iziet no skata. Jūs varat arī norādīt axis (block vai inline) un target (piemēram, cover, contain, entry, exit).

Lai gan animation-timeline nosaka, kas virza animāciju, tā nenorāda, kad šajā ar ritināšanu vadītajā laika skalā animācijai faktiski būtu jāatskaņo. Tieši šeit animation-range kļūst neaizstājams.

Kas ir animation-range?

Savā būtībā animation-range ļauj jums definēt konkrētu ritināšanas laika skalas segmentu, kurā jūsu CSS animācija tiks izpildīta. Iedomājieties ritināšanas laika skalu kā trasi no 0% līdz 100%. Bez animation-range animācija, kas piesaistīta ritināšanas laika skalai, parasti tiktu atskaņota visā šīs laika skalas 0-100% diapazonā.

Bet ko darīt, ja vēlaties, lai elements parādītos tikai tad, kad tas ienāk skatlogā (teiksim, no 20% redzama līdz 80% redzamam)? Vai varbūt vēlaties, lai sarežģīta transformācija notiktu tikai tad, kad lietotājs ritina garām konkrētai sadaļai, un pēc tam apgrieztos, kad viņš ritina atpakaļ?

animation-range nodrošina šo precīzo kontroli. Tā darbojas kopā ar animation-timeline un jūsu @keyframes definīcijām, lai piedāvātu smalku efektu orķestrēšanu. Būtībā tas ir vērtību pāris – sākuma punkts un beigu punkts – kas norobežo ritināšanas laika skalas aktīvo daļu konkrētai animācijai.

Salīdziniet to ar animation-duration tradicionālajās laika bāzes animācijās. animation-duration nosaka, cik ilgi animācija ilgst. Ar ritināšanu vadītās animācijās "ilgumu" faktiski nosaka, cik daudz ritināšanas ir nepieciešams, lai šķērsotu definēto animation-range. Jo ātrāk ritina, jo ātrāk animācija atskaņojas savā diapazonā.

Iedziļināšanās animation-range īpašībās

animation-range īpašība ir saīsinājums animation-range-start un animation-range-end. Izpētīsim katru no tām detalizēti, kopā ar to spēcīgo pieņemto vērtību klāstu.

animation-range-start un animation-range-end

Šīs īpašības definē animācijas aktīvā diapazona sākuma un beigu punktus uz tās saistītās ritināšanas laika skalas. Tās var norādīt atsevišķi vai apvienot, izmantojot animation-range saīsinājumu.

• animation-range-start: Definē punktu ritināšanas laika skalā, kurā animācijai jāsākas.
• animation-range-end: Definē punktu ritināšanas laika skalā, kurā animācijai jābeidzas.

Šīm īpašībām norādītās vērtības ir relatīvas attiecībā pret izvēlēto animation-timeline. scroll() laika skalai tas parasti attiecas uz konteinera ritināšanas progresu. view() laika skalai tas attiecas uz elementa ienākšanu/iziešanu no skatloga.

Saīsinājums animation-range

Saīsinājuma īpašība ļauj kodolīgi iestatīt gan sākuma, gan beigu punktus:

.element {\n  animation-range:  [  ];\n}

Ja ir norādīta tikai viena vērtība, tā iestata gan animation-range-start, gan animation-range-end uz to pašu vērtību, kas nozīmē, ka animācija tiktu atskaņota momentāni tajā punktā (lai gan parasti tas nav noderīgi nepārtrauktām animācijām).

Pieņemtās vērtības animation-range

Šeit animation-range patiesi izceļas, piedāvājot bagātīgu atslēgvārdu un precīzu mērījumu kopu:

1. Procenti (piemēram, 20%, 80%)

Procenti definē animācijas sākuma un beigu punktus kā procentuālo daļu no kopējā ritināšanas laika skalas garuma. Tas ir īpaši intuitīvi scroll() laika skalām.

• Piemērs: Animācija, kas liek elementam parādīties, kad lietotājs ritina cauri lapas vidusdaļai.

.fade-in-middle {\n  animation: fadeIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 70%; /* Sākas pie 30% ritināšanas, beidzas pie 70% ritināšanas */\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}

Šajā piemērā fadeIn animācija tiks atskaņota tikai tad, kad saknes ritināšanas konteinera ritināšanas pozīcija ir starp 30% un 70% no tā kopējā ritināmā augstuma. Ja lietotājs ritinās ātrāk, animācija pabeigsies ātrāk šajā diapazonā; ja viņš ritinās lēnāk, tā atskaņosies pakāpeniskāk.

2. Garumi (piemēram, 200px, 10em)

Garumi definē animācijas sākuma un beigu punktus kā absolūtu attālumu pa ritināšanas laika skalu. To retāk izmanto vispārējai lapas ritināšanai, bet tas var būt noderīgs animācijām, kas saistītas ar konkrētām elementu pozīcijām vai strādājot ar fiksēta izmēra ritināšanas konteineriem.

• Piemērs: Animācija horizontāli ritināmā attēlu galerijā, kas atskaņojas pirmo 500px ritināšanas laikā.

.gallery-caption {\n  animation: slideCaption 1s linear forwards;\n  animation-timeline: scroll(self horizontal);\n  animation-range: 0px 500px;\n}\n\n@keyframes slideCaption {\n  from { transform: translateX(100px); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}

3. Atslēgvārdi view() laika skalām

Šie atslēgvārdi ir īpaši spēcīgi, ja tos lieto ar view() laika skalu, ļaujot precīzi kontrolēt animācijas uzvedību, kad elements ienāk vai iziet no skatloga vai ritināšanas konteinera.

• entry: Animācijas diapazons sākas, kad elementa ritināšanas porta robeža šķērso tā ietverošā bloka entry punktu. Tas parasti nozīmē, ka elementa pirmā mala sāk parādīties skatlogā.
• exit: Animācijas diapazons beidzas, kad elementa ritināšanas porta robeža šķērso tā ietverošā bloka exit punktu. Tas parasti nozīmē, ka elementa pēdējā mala pazūd no skatloga.
• cover: Animācija tiek atskaņota visu laiku, kamēr elements *pārklāj* savu ritināšanas konteineru vai skatlogu. Tā sākas, kad elementa vadošā mala ienāk ritināšanas portā, un beidzas, kad tā sekojošā mala iziet. Šī bieži ir noklusējuma vai intuitīvākā uzvedība elementa redzamības animācijai.
• contain: Animācija tiek atskaņota, kamēr elements ir *pilnībā ietverts* savā ritināšanas konteinerā/skatlogā. Tā sākas, kad elements ir pilnībā redzams, un beidzas, kad kāda tā daļa sāk iziet.
• start: Līdzīgi kā entry, bet īpaši attiecas uz ritināšanas porta sākuma malu attiecībā pret elementu.
• end: Līdzīgi kā exit, bet īpaši attiecas uz ritināšanas porta beigu malu attiecībā pret elementu.

Šos atslēgvārdus var arī kombinēt ar garuma vai procentuālo nobīdi, nodrošinot vēl smalkāku kontroli. Piemēram, entry 20% nozīmē, ka animācija sākas, kad elements ir ienācis 20% skatlogā.

• Piemērs: Pielīpoša navigācijas josla, kas maina krāsu, kad tā "pārklāj" galveno sadaļu.

.hero-section {\n  height: 500px;\n  /* ... citi stili ... */\n}\n\n.sticky-nav {\n  position: sticky;\n  top: 0;\n  animation: navColorChange 1s linear forwards;\n  animation-timeline: view(); /* Attiecībā pret savu skatu ritināšanas portā */\n  animation-range: cover;\n}\n\n@keyframes navColorChange {\n  0% { background-color: transparent; color: white; }\n  100% { background-color: #333; color: gold; }\n}

Šajā scenārijā, kad .sticky-nav elements (vai elements, kura view() laika skalai tas ir piesaistīts) pārklāj skatlogu, navColorChange animācija progresē.

• Piemērs: Attēls, kas nedaudz palielinās, ienākot skatlogā, un pēc tam samazinās, to atstājot.

.image-wrapper {\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 20% cover 80%; /* Sākas, kad 20% elementa ir redzami, atskaņo, līdz 80% elementa ir aptvēruši skatu */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.05); } /* Maksimālais mērogs, kad aptuveni centrēts */\n  100% { transform: scale(1); }\n}

Tas ilustrē, kā animation-range var kartēt view() laika skalas daļas uz dažādiem @keyframes animācijas posmiem.

4. normal (Noklusējums)

Atslēgvārds normal ir noklusējuma vērtība animation-range. Tas norāda, ka animācijai jādarbojas visā izvēlētās ritināšanas laika skalas garumā (no 0% līdz 100%).

Lai gan bieži vien piemērots, normal var nenodrošināt precīzu laiku, kas nepieciešams sarežģītiem efektiem, un tieši tāpēc animation-range piedāvā detalizētāku kontroli.

Praktiski pielietojumi un lietošanas gadījumi

animation-range spēks slēpjas tā spējā atdzīvināt sarežģītus, interaktīvus ritināšanas efektus ar minimālu piepūli un maksimālu veiktspēju. Izpētīsim dažus pārliecinošus lietošanas gadījumus, kas var uzlabot lietotāju pieredzi globālā mērogā, no e-komercijas vietnēm līdz izglītības platformām.

Paralakses ritināšanas efekti

Paralakse, kur fona saturs pārvietojas ar citu ātrumu nekā priekšplāna saturs, rada dziļuma ilūziju. Tradicionāli tas bija galvenais kandidāts JavaScript izmantošanai. Ar animation-range tas kļūst daudz vienkāršāk.

Iedomājieties ceļojumu vietni, kas demonstrē galamērķus. Lietotājam ritinot, pilsētas panorāmas fona attēls varētu lēnām mainīties, kamēr priekšplāna elementi, piemēram, teksts vai pogas, pārvietojas normālā ātrumā. Definējot scroll(root) laika skalu un pielietojot transform: translateY() animāciju ar definētu animation-range, jūs varat panākt plūstošu paralaksi bez sarežģītiem aprēķiniem.

.parallax-background {\n  animation: moveBackground var(--parallax-speed) linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%; /* Vai konkrētas sadaļas diapazons */\n}\n\n@keyframes moveBackground {\n  from { transform: translateY(0); }\n  to { transform: translateY(-100px); } /* Pārvietojas uz augšu par 100px visā ritināšanas garumā */\n}

animation-range nodrošina, ka paralakses efekts ir sinhronizēts ar dokumenta kopējo ritināšanu, nodrošinot plūstošu un aizraujošu pieredzi.

Elementu atklāšanas animācijas

Bieži sastopams lietotāja saskarnes modelis ir elementu atklāšana (parādīšanās, slīdēšana uz augšu, izvēršanās), kad tie ienāk lietotāja skatlogā. Tas pievērš uzmanību jaunam saturam un rada progresa sajūtu.

Apsveriet tiešsaistes kursu platformu: lietotājam ritinot cauri nodarbībai, katrs jauns sadaļas virsraksts vai attēls varētu graciozi parādīties un ieslīdēt skatā. Izmantojot animation-timeline: view() kopā ar animation-range: entry 0% cover 50%, jūs varat noteikt, ka elements parādās no pilnīgi caurspīdīga līdz pilnīgi necaurspīdīgam, kad tas ienāk skatlogā un sasniedz tā viduspunktu.

.reveal-item {\n  opacity: 0;\n  transform: translateY(50px);\n  animation: revealItem 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 10% cover 50%; /* Sākas, kad 10% ir redzami, beidzas, kad 50% ir redzami */\n}\n\n@keyframes revealItem {\n  to { opacity: 1; transform: translateY(0); }\n}

Šī pieeja liek satura ielādei justies dinamiskākai un saistošākai, neatkarīgi no tā, vai tas ir produkta apraksts e-komercijas vietnē vai emuāra ieraksta sadaļa ziņu portālā.

Progresa indikatori

Gariem rakstiem, lietotāja rokasgrāmatām vai daudzpakāpju formām progresa indikators var ievērojami uzlabot lietojamību, parādot lietotājiem, kur viņi atrodas un cik daudz ir atlicis. Bieži sastopams modelis ir lasīšanas progresa josla skatloga augšpusē.

Jūs varat izveidot plānu joslu lapas augšpusē un saistīt tās platumu ar dokumenta ritināšanas progresu. Ar animation-timeline: scroll(root) un animation-range: 0% 100% joslas platums var palielināties no 0% līdz 100%, kad lietotājs ritina no lapas augšas līdz apakšai.

.progress-bar {\n  position: fixed;\n  top: 0; left: 0;\n  height: 5px;\n  background-color: #007bff;\n  width: 0%; /* Sākotnējais stāvoklis */\n  animation: fillProgress 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%;\n  z-index: 1000;\n}\n\n@keyframes fillProgress {\n  to { width: 100%; }\n}

Tas nodrošina skaidru vizuālu norādi, kas uzlabo navigāciju un samazina lietotāju neapmierinātību lapās ar lielu satura apjomu, kas ir vērtīga funkcija globālam satura patēriņam.

Sarežģītas daudzpakāpju animācijas

animation-range patiesi izceļas, orķestrējot sarežģītas secības, kur dažādām animācijām ir jāatskaņo noteiktos, nepārklājošos vienas ritināšanas laika skalas segmentos.

Iedomājieties lapu "mūsu uzņēmuma vēsture". Lietotājam ritinot, viņš iet garām "atskaites punktu" sadaļām. Katrs atskaites punkts varētu izraisīt unikālu animāciju:

• 1. atskaites punkts: Grafika rotē un izplešas (animation-range: 10% 20%)
• 2. atskaites punkts: Laika skalas elements ieslīd no sāna (animation-range: 30% 40%)
• 3. atskaites punkts: Citāta burbulis parādās (animation-range: 50% 60%)

Rūpīgi definējot diapazonus, jūs varat izveidot saskaņotu un interaktīvu stāstījuma pieredzi, virzot lietotāja uzmanību caur dažādiem satura gabaliem, kamēr viņi ritina.

.milestone-1-graphic {\n  animation: rotateExpand 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 10% 20%;\n}\n.milestone-2-timeline {\n  animation: slideIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 40%;\n}\n/* ... un tā tālāk ... */\n

Šis kontroles līmenis ļauj veidot ļoti pielāgotas un zīmolam atbilstošas stāstīšanas pieredzes, kas rezonē ar dažādām auditorijām.

Interaktīva stāstīšana

Papildus vienkāršai atklāšanai, animation-range veicina bagātīgus, interaktīvus stāstījumus, kas bieži redzami produktu galvenajās lapās vai redakcionālajā saturā. Elementi var augt, sarukt, mainīt krāsu vai pat pārveidoties citās formās, lietotājam ritinot cauri stāstam.

Apsveriet produkta izlaišanas lapu. Lietotājam ritinot uz leju, produkta attēls varētu lēnām griezties, lai atklātu dažādus leņķus, kamēr blakus tam parādās funkciju teksts. Šī slāņainā pieeja notur lietotāju iesaistīšanos un nodrošina dinamisku veidu, kā prezentēt informāciju, neizmantojot pilnu video.

animation-range piedāvātā precīzā kontrole ļauj dizaineriem un izstrādātājiem horeografēt šīs pieredzes tieši tā, kā paredzēts, nodrošinot plūstošu un apzinātu plūsmu lietotājam neatkarīgi no viņa ritināšanas ātruma.

Ar ritināšanu vadītu animāciju iestatīšana

CSS Scroll-Driven Animations ar animation-range ieviešana ietver dažus galvenos soļus. Apskatīsim būtiskās sastāvdaļas.

scroll() un view() laika skalas atkārtoti

Jūsu pirmais lēmums ir, kurai ritināšanas laika skalai piesaistīt animāciju:

• scroll(): Tas ir ideāli piemērots animācijām, kas reaģē uz kopējo dokumenta ritināšanu vai konkrēta konteinera ritināšanu.
• Sintakse: scroll([ || ]?)
  Piemēram, scroll(root) galvenajai dokumenta ritināšanai, scroll(self) elementa paša ritināšanas konteineram vai scroll(my-element-id y) pielāgota elementa vertikālajai ritināšanai.
• view(): Tas ir labākais animācijām, kuras izraisa elementa redzamība tā ritināšanas konteinerā (parasti skatlogā).
• Sintakse: view([ || ]?)
  Piemēram, view() noklusējuma skatloga laika skalai vai view(block) animācijām, kas saistītas ar bloka ass redzamību. Jūs varat arī nosaukt view-timeline, izmantojot view-timeline-name uz vecākelementa/priekšteča.

Svarīgi ir tas, ka animation-timeline jāpiemēro elementam, kuru vēlaties animēt, nevis obligāti pašam ritināšanas konteineram (ja vien šis elements nav ritināšanas konteiners).

Animācijas definēšana ar @keyframes

Jūsu animācijas vizuālās izmaiņas tiek definētas, izmantojot standarta @keyframes noteikumus. Atšķirība ir tajā, kā šie atslēgas kadri tiek kartēti uz ritināšanas laika skalu.

Kad animācija ir saistīta ar ritināšanas laika skalu, procenti @keyframes ietvaros (no 0% līdz 100%) vairs nepārstāv laiku. Tā vietā tie pārstāv progresu caur norādīto animation-range. Ja jūsu animation-range ir 20% 80%, tad 0% jūsu @keyframes atbilst 20% no ritināšanas laika skalas, un 100% jūsu @keyframes atbilst 80% no ritināšanas laika skalas.

Šī ir spēcīga konceptuāla maiņa: jūsu atslēgas kadri definē animācijas pilno secību, un animation-range apgriež un kartē šo secību uz konkrētu ritināšanas segmentu.

animation-timeline un animation-range piemērošana

Saliksim visu kopā ar praktisku piemēru: elements, kas nedaudz palielinās, kļūstot pilnībā redzams skatlogā, un pēc tam samazinās, to atstājot.

HTML struktūra:

<div class="container">\n  <!-- Daudz satura, lai nodrošinātu ritināšanu -->\n  <div class="animated-element">Sveika, Pasaule</div>\n  <!-- Vēl saturs -->\n</div>

CSS stili:

.animated-element {\n  height: 200px;\n  width: 200px;\n  background-color: lightblue;\n  margin: 500px auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 1.5em;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n\n  /* Galvenās īpašības ar ritināšanu vadītai animācijai */\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view(); /* Animācija progresē, kad šis elements ienāk/iziet no skata */\n  animation-range: entry 20% cover 80%; /* Animācija darbojas no brīža, kad redzami 20% elementa, līdz 80% no tā ir pārklājuši skatu */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(0.8); opacity: 0; }\n  50% { transform: scale(1.1); opacity: 1; } /* Maksimālais mērogs un necaurredzamība, kad aptuveni pusceļā caur aktīvo diapazonu */\n  100% { transform: scale(0.9); opacity: 1; }\n}

Šajā piemērā:

• animation-timeline: view() nodrošina, ka animāciju virza .animated-element redzamība skatlogā.
• animation-range: entry 20% cover 80% definē animācijas aktīvo zonu: tā sākas, kad elements ir 20% skatlogā (no tā vadošās malas) un atskaņo, līdz 80% no elementa ir pārklājuši skatlogu (no tā vadošās malas).
• @keyframes scaleOnView definē transformāciju. 0% no atslēgas kadriem tiek kartēti uz entry 20% no skata laika skalas, 50% no atslēgas kadriem tiek kartēti uz viduspunktu diapazonā no `entry 20%` līdz `cover 80%`, un 100% tiek kartēti uz cover 80%.
• animation-duration: 1s un animation-fill-mode: forwards joprojām ir svarīgi. Ilgums darbojas kā "ātruma reizinātājs"; garāks ilgums liek animācijai parādīties lēnāk savā diapazonā noteiktā ritināšanas attālumā. forwards nodrošina, ka animācijas beigu stāvoklis saglabājas.

Šī iestatīšana nodrošina neticami jaudīgu un intuitīvu veidu, kā kontrolēt uz ritināšanu balstītas animācijas tikai ar CSS.

Progresīvas tehnikas un apsvērumi

Papildus pamatiem, animation-range nevainojami integrējas ar citām CSS animācijas īpašībām un prasa apsvērt veiktspēju un saderību.

animation-range kombinēšana ar animation-duration un animation-fill-mode

Lai gan ar ritināšanu vadītām animācijām nav fiksēta "ilguma" tradicionālajā izpratnē (jo tas ir atkarīgs no ritināšanas ātruma), animation-duration joprojām ir svarīga loma. Tas definē "mērķa ilgumu", kurā animācijai jāpabeidz pilna atslēgas kadru secība, ja tā tiktu atskaņota "normālā" tempā savā norādītajā diapazonā.

• Garāks animation-duration nozīmē, ka animācija šķitīs lēnāka dotajā animation-range.
• Īsāks animation-duration nozīmē, ka animācija šķitīs ātrāka dotajā animation-range.

animation-fill-mode arī paliek kritiski svarīgs. forwards bieži tiek izmantots, lai nodrošinātu, ka animācijas beigu stāvoklis saglabājas, kad aktīvais animation-range ir šķērsots. Bez tā elements varētu atgriezties sākotnējā stāvoklī, tiklīdz lietotājs izritina no definētā diapazona.

Piemēram, ja vēlaties, lai elements paliktu redzams pēc tam, kad tas ir ienācis skatlogā, animation-fill-mode: forwards ir būtisks.

Vairāku animāciju apstrāde vienam elementam

Jūs varat piemērot vairākas ar ritināšanu vadītas animācijas vienam elementam. To panāk, norādot ar komatiem atdalītu vērtību sarakstu animation-name, animation-timeline un animation-range (un citām animācijas īpašībām).

Piemēram, elements varētu vienlaikus parādīties, ienākot skatā, un griezties, pārklājot skatu:

.multi-animated-item {\n  animation-name: fadeIn, rotateItem;\n  animation-duration: 1s, 2s;\n  animation-timeline: view(), view();\n  animation-range: entry 0% cover 50%, cover;\n  animation-fill-mode: forwards, forwards;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rotateItem {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}

Tas demonstrē precīzas orķestrēšanas spēku, ļaujot dažādus elementa izskata aspektus kontrolēt ar dažādiem ritināšanas laika skalas segmentiem.

Ietekme uz veiktspēju

Viena no galvenajām CSS Scroll-Driven Animations, ieskaitot animation-range, priekšrocībām ir to raksturīgie veiktspējas ieguvumi. Pārvietojot ar ritināšanu saistīto loģiku no JavaScript uz pārlūkprogrammas renderēšanas dzinēju:

• Galvenā pavediena atslogošana: Animācijas var darboties kompozitora pavedienā, atbrīvojot galveno JavaScript pavedienu citiem uzdevumiem, kas noved pie plūstošākām mijiedarbībām.
• Optimizēta renderēšana: Pārlūkprogrammas ir ļoti optimizētas CSS animācijām un transformācijām, bieži izmantojot GPU paātrinājumu.
• Samazināta raustīšanās: Mazāka paļaušanās uz JavaScript ritināšanas notikumiem var ievērojami samazināt "raustīšanos" (stostīšanos vai saraustītību), kas var rasties, kad ritināšanas notikumu klausītāji ir pārslogoti.

Tas pārvēršas plūstošākā un atsaucīgākā lietotāja pieredzē, kas ir īpaši svarīgi globālām auditorijām, kas piekļūst vietnēm ar dažādām ierīcēm un tīkla apstākļiem.

Pārlūkprogrammu saderība

Sākot no 2023. gada beigām / 2024. gada sākuma, CSS Scroll-Driven Animations (ieskaitot animation-timeline un animation-range) galvenokārt tiek atbalstītas uz Chromium bāzes pārlūkprogrammām (Chrome, Edge, Opera, Brave utt.).

Pašreizējais statuss:

• Chrome: Pilnībā atbalstīts (kopš Chrome 115)
• Edge: Pilnībā atbalstīts
• Firefox: Izstrādes procesā / aiz karodziņiem
• Safari: Izstrādes procesā / aiz karodziņiem

Rezerves stratēģijas:

• Funkciju vaicājumi (@supports): Izmantojiet @supports (animation-timeline: scroll()), lai piemērotu ar ritināšanu vadītas animācijas tikai tad, ja tās tiek atbalstītas. Nodrošiniet vienkāršāku, neanimētu vai uz JavaScript balstītu rezervi neatbalstītām pārlūkprogrammām.
• Progresīvā uzlabošana: Izstrādājiet savu saturu tā, lai tas būtu pilnībā pieejams un saprotams pat bez šīm progresīvajām animācijām. Animācijām ir jāuzlabo, nevis jābūt kritiskām lietotāja pieredzei.

Ņemot vērā straujo tīmekļa standartu attīstību, tuvākajā nākotnē sagaidāms plašāks pārlūkprogrammu atbalsts. Ieteicams sekot līdzi resursiem, piemēram, Can I Use..., lai iegūtu jaunāko saderības informāciju.

Ar ritināšanu vadītu animāciju atkļūdošana

Šo animāciju atkļūdošana var būt jauna pieredze. Mūsdienu pārlūkprogrammu izstrādātāju rīki, īpaši Chromium, attīstās, lai nodrošinātu lielisku atbalstu:

• Animāciju cilne: Chrome DevTools cilne "Animations" ir nenovērtējama. Tā parāda visas aktīvās animācijas, ļauj tās apturēt, atkārtot un ritināt. Ar ritināšanu vadītām animācijām tā bieži nodrošina vizuālu ritināšanas laika skalas un aktīvā diapazona attēlojumu.
• Elementu panelis: Pārbaudot elementu "Elements" panelī un aplūkojot "Styles" cilni, tiks parādītas piemērotās animation-timeline un animation-range īpašības.
• Ritināšanas laika skalas pārklājums: Dažas pārlūkprogrammas piedāvā eksperimentālu pārklājumu, lai vizualizētu ritināšanas laika skalu tieši lapā, palīdzot saprast, kā ritināšanas pozīcija tiek kartēta uz animācijas progresu.

Iepazīšanās ar šiem rīkiem ievērojami paātrinās izstrādes un pilnveidošanas procesu.

Labākās prakses globālai ieviešanai

Lai gan animation-range piedāvā neticamu radošo brīvību, atbildīga ieviešana ir galvenais, lai nodrošinātu pozitīvu pieredzi lietotājiem visās vidēs un ierīcēs visā pasaulē.

Pieejamības apsvērumi

Kustība var būt mulsinoša vai pat kaitīga dažiem lietotājiem, īpaši tiem, kuriem ir vestibulāri traucējumi vai kustību slimība. Vienmēr apsveriet:

• prefers-reduced-motion mediju vaicājums: Cieniet lietotāju preferences. Lietotājiem, kuri savās operētājsistēmas iestatījumos ir iespējojuši "Samazināt kustību", jūsu animācijām jābūt ievērojami mazinātām vai pilnībā noņemtām.

@media (prefers-reduced-motion) {\n  .animated-element {\n    animation: none !important; /* Atspējot animācijas */\n    transform: none !important; /* Atiestatīt transformācijas */\n    opacity: 1 !important; /* Nodrošināt redzamību */\n  }\n}

Šī ir kritiska pieejamības labākā prakse visām animācijām, ieskaitot ar ritināšanu vadītās.

• Izvairieties no pārmērīgas kustības: Pat ja tās ir iespējotas, izvairieties no krasām, ātrām vai liela mēroga kustībām, kas varētu būt traucējošas vai neērtas. Smalkas animācijas bieži ir efektīvākas.
• Nodrošiniet lasāmību: Pārliecinieties, ka teksts un kritisks saturs paliek lasāms visā animācijas laikā. Izvairieties no teksta animēšanas veidā, kas padara to nelasāmu vai izraisa mirgošanu.

Adaptīvais dizains

Animācijām ir jāizskatās un jādarbojas labi dažādās ierīcēs, no lieliem galddatoru monitoriem līdz maziem mobilajiem tālruņiem. Apsveriet:

• Uz skatlogu balstītas vērtības: Relatīvo vienību, piemēram, procentu, vw, vh, izmantošana transformācijām vai pozicionēšanai atslēgas kadros var palīdzēt animācijām graciozi mērogoties.
• Mediju vaicājumi animācijas diapazonam: Jums varētu būt nepieciešamas dažādas animation-range vērtības vai pat pilnīgi atšķirīgas animācijas atkarībā no ekrāna izmēra. Piemēram, sarežģītu ar ritināšanu vadītu stāstījumu varētu vienkāršot mobilajām ierīcēm, kur ekrāna platība un veiktspēja ir ierobežotākas.
• Testēšana uz dažādām ierīcēm: Vienmēr pārbaudiet savas ar ritināšanu vadītās animācijas uz reālām ierīcēm vai izmantojot stabilu ierīču emulāciju DevTools, lai atklātu jebkādus veiktspējas vājos punktus vai izkārtojuma problēmas.

Progresīvā uzlabošana

Kā minēts pārlūkprogrammu saderības sadaļā, nodrošiniet, ka jūsu pamat saturs un funkcionalitāte nekad nav atkarīga no šīm progresīvajām animācijām. Lietotājiem ar vecākām pārlūkprogrammām vai tiem, kuriem ir samazinātas kustības iestatījumi, joprojām jābūt pilnīgai un apmierinošai pieredzei. Animācijas ir uzlabojums, nevis prasība.

Tas nozīmē, ka jūsu HTML un CSS ir jāstrukturē tā, lai saturs būtu semantiski pareizs un vizuāli pievilcīgs, pat ja netiek ielādēts neviens JavaScript vai progresīvās CSS animācijas.

Veiktspējas optimizācija

Lai gan vietējās CSS animācijas ir veiktspējīgas, sliktas izvēles joprojām var radīt problēmas:

• Animējiet transform un opacity: Šīs īpašības ir ideāli piemērotas animācijai, jo tās bieži var apstrādāt kompozitors, izvairoties no izkārtojuma un zīmēšanas darbiem. Ja iespējams, izvairieties no tādu īpašību animēšanas kā width, height, margin, padding, top, left, right, bottom, jo tās var izraisīt dārgus izkārtojuma pārrēķinus.
• Ierobežojiet sarežģītus efektus: Lai gan tas ir vilinoši, izvairieties no pārāk daudz vienlaicīgu, ļoti sarežģītu, ar ritināšanu vadītu animāciju piemērošanas, īpaši vairākiem elementiem vienlaikus. Atrodiet līdzsvaru starp vizuālo bagātību un veiktspēju.
• Izmantojiet aparatūras paātrinājumu: Īpašības, piemēram, transform: translateZ(0) (lai gan bieži vien vairs nav nepieciešamas ar modernām pārlūkprogrammām un transform animācijām), dažreiz var palīdzēt piespiest elementus uz saviem kompozīta slāņiem, vēl vairāk uzlabojot veiktspēju.

Reālās pasaules piemēri un iedvesma

Lai vēl vairāk nostiprinātu jūsu izpratni un iedvesmotu jūsu nākamo projektu, konceptualizēsim dažus reālās pasaules animation-range pielietojumus:

• Korporatīvie gada pārskati: Iedomājieties interaktīvu gada pārskatu, kur finanšu diagrammas parādās ar animāciju, galvenie darbības rādītāji (KPI) saskaitās, un uzņēmuma atskaites punkti tiek izcelti ar smalkiem vizuāliem norādījumiem, lietotājam ritinot cauri dokumentam. Katrai sadaļai varētu būt savs specifisks animation-range, radot vadītu lasīšanas pieredzi.
• Produktu demonstrācijas (E-komercija): Jauna sīkrīka produkta detalizētās informācijas lapā galvenais produkta attēls varētu lēnām griezties vai tuvināties, lietotājam ritinot, atklājot funkcijas slāni pa slānim. Piederumu attēli varētu parādīties secīgi, kad to apraksti kļūst redzami. Tas pārveido statisku lapu par dinamisku izpēti.
• Izglītības satura platformas: Sarežģītiem zinātniskiem jēdzieniem vai vēsturiskām laika skalām ar ritināšanu vadītas animācijas var ilustrēt procesus. Diagramma varētu veidoties pa daļām, vai vēsturiska karte varētu animēt karaspēka kustības, viss sinhronizēts ar lietotāja ritināšanas dziļumu. Tas veicina izpratni un atmiņu.
• Pasākumu vietnes: Festivāla vietnē varētu būt "dalībnieku atklāšana", kur mākslinieku fotoattēli un vārdi parādās ar animāciju tikai tad, kad to sadaļa kļūst pamanāma. Grafika sadaļa varētu izcelt pašreizējo laika posmu ar smalkām fona izmaiņām, lietotājam ritinot garām.
• Mākslas portfeļi: Mākslinieki var izmantot animation-range, lai radītu unikālas savu darbu vitrīnas, kur katrs darbs tiek atklāts ar pielāgotu animāciju, kas atbilst tā stilam, radot neaizmirstamu un māksliniecisku pārlūkošanas pieredzi.

Šie piemēri izceļ animation-range daudzpusību un izteiksmīgo spēku. Radoši domājot par to, kā ritināšana var virzīt stāstījumu un atklāt saturu, izstrādātāji var radīt patiesi unikālas un saistošas digitālās pieredzes, kas izceļas pārpildītā tiešsaistes ainavā.

Noslēgums

CSS Animation Range, kopā ar animation-timeline, ir nozīmīgs solis uz priekšu vietējās tīmekļa animācijas spējās. Tas piedāvā front-end izstrādātājiem vēl nebijušu deklaratīvās kontroles līmeni pār ar ritināšanu vadītiem efektiem, pārvietojot sarežģītas mijiedarbības no sarežģītu JavaScript bibliotēku jomas uz veiktspējīgāku un uzturamāku tīra CSS domēnu.

Precīzi definējot animācijas sākuma un beigu punktus uz ritināšanas laika skalas, jūs varat orķestrēt elpu aizraujošus paralakses efektus, saistošus satura atklāšanas veidus, dinamiskus progresa indikatorus un sarežģītus daudzpakāpju stāstījumus. Veiktspējas ieguvumi, apvienojumā ar CSS vietējo risinājumu eleganci, padara to par spēcīgu papildinājumu jebkura izstrādātāja rīku komplektam.

Lai gan pārlūkprogrammu atbalsts joprojām konsolidējas, progresīvās uzlabošanas stratēģija nodrošina, ka jūs varat sākt eksperimentēt ar šīm funkcijām un tās ieviest jau šodien, nodrošinot vismodernāko pieredzi lietotājiem modernās pārlūkprogrammās, vienlaikus graciozi nodrošinot rezervi citiem.

Tīmeklis ir nepārtraukti mainīgs audekls. Apgūstiet CSS Animation Range, lai radītu dzīvīgākas, interaktīvākas un veiktspējīgākas lietotāju pieredzes. Sāciet eksperimentēt, veidojiet pārsteidzošas lietas un veiciniet dinamiskāku un saistošāku digitālo pasauli visiem.