CSS „Animation Range“ įvaldymas: tikslios slinkimu valdomos animacijos ribos

Dinamiškame interneto kūrimo pasaulyje vartotojo patirtis yra svarbiausia. Interaktyvios ir patrauklios sąsajos nebėra prabanga; jos tapo lūkesčiu. Daugelį metų, kuriant sudėtingas slinkimu valdomas animacijas – kai elementai dinamiškai reaguoja į vartotojo slinkimo veiksmus – dažnai tekdavo pasikliauti sudėtingomis JavaScript bibliotekomis. Nors šie sprendimai buvo galingi, kartais jie sukeldavo našumo problemų ir padidindavo kūrimo sudėtingumą.

Pristatome CSS Animation Range – novatorišką CSS slinkimu valdomų animacijų modulio papildymą. Ši revoliucinė funkcija suteikia kūrėjams galimybę tiksliai apibrėžti ribas, kada animacija turėtų prasidėti ir baigtis tam tikroje slinkties laiko juostoje, ir visa tai daryti tiesiogiai CSS. Tai deklaratyvus, našus ir elegantiškas būdas atgaivinti jūsų interneto dizainą, suteikiantis smulkiagrūdę slinkimo efektų kontrolę, kuri anksčiau buvo sudėtinga ar neįmanoma naudojant vien tik natūralų CSS.

Šis išsamus vadovas gilinsis į CSS Animation Range subtilybes. Išnagrinėsime pagrindines sąvokas, išpakuosime jo savybes, pademonstruosime praktinius pritaikymus, aptarsime pažangias technikas ir pateiksime geriausias praktikas, kaip sklandžiai integruoti jį į savo pasaulinius interneto projektus. Pabaigoje būsite pasirengę pasinaudoti šiuo galingu įrankiu, kad sukurtumėte tikrai patrauklias ir našias slinkimu valdomas patirtis vartotojams visame pasaulyje.

Slinkimu valdomų animacijų pagrindinių sąvokų supratimas

Prieš analizuojant animation-range, labai svarbu suprasti platesnį CSS slinkimu valdomų animacijų kontekstą ir problemas, kurias jos sprendžia.

Slinkimu valdomų animacijų evoliucija

Istoriškai, norint pasiekti su slinkimu susietus efektus internete, reikėjo nemažai JavaScript kodo. Bibliotekos, tokios kaip GSAP ScrollTrigger, ScrollMagic ar net pasirinktinės Intersection Observer implementacijos, tapo nepakeičiamais įrankiais kūrėjams. Nors šios bibliotekos siūlė didžiulį lankstumą, jos turėjo tam tikrų kompromisų:

• Našumas: JavaScript pagrįsti sprendimai, ypač tie, kurie dažnai perskaičiuoja pozicijas slinkimo metu, kartais galėjo sukelti trūkčiojimą ar ne tokias sklandžias animacijas, ypač mažesnio galingumo įrenginiuose ar sudėtinguose puslapiuose.
• Sudėtingumas: Šių bibliotekų integravimas ir valdymas pridėjo papildomų kodo sluoksnių, padidindamas mokymosi kreivę ir klaidų tikimybę.
• Deklaratyvus vs. Imperatyvus: JavaScript dažnai reikalauja imperatyvaus požiūrio („daryk tai, kai atsitiks anas“), tuo tarpu CSS iš prigimties siūlo deklaratyvų stilių („šis elementas turėtų atrodyti taip šiomis sąlygomis“). Natūralūs CSS sprendimai geriau atitinka pastarąjį.

CSS slinkimu valdomų animacijų atsiradimas reiškia reikšmingą poslinkį link natūralesnio, našesnio ir deklaratyvesnio požiūrio. Perkėlus šias animacijas į naršyklės atvaizdavimo variklį, kūrėjai gali pasiekti sklandesnius efektus su mažiau kodo.

Pristatome animation-timeline

CSS slinkimu valdomų animacijų pagrindas yra animation-timeline savybė. Užuot naudojus fiksuotą laiko trukmę, animation-timeline leidžia animacijai progresuoti remiantis nurodyto elemento slinkties pozicija. Ji priima dvi pagrindines funkcijas:

• scroll(): Ši funkcija sukuria slinkties progreso laiko juostą. Galite nurodyti, kurio elemento slinkties pozicija turėtų valdyti animaciją. Pavyzdžiui, scroll(root) reiškia dokumento pagrindinį slinkties konteinerį, o scroll(self) reiškia patį elementą, jei jis yra slankus. Ši laiko juosta seka progresą nuo slankiosios srities pradžios (0%) iki pabaigos (100%).
• view(): Ši funkcija sukuria matomumo progreso laiko juostą. Skirtingai nuo scroll(), kuri seka visą slankųjį diapazoną, view() seka elemento matomumą jo slinkties konteineryje (dažniausiai peržiūros srityje). Animacija progresuoja, kai elementas įeina į matomumo lauką, jį kerta ir iš jo išeina. Taip pat galite nurodyti axis (block arba inline) ir target (pvz., cover, contain, entry, exit).

Nors animation-timeline nurodo, kas valdo animaciją, ji nenurodo, kada toje slinkimu valdomoje laiko juostoje animacija turėtų būti paleista. Būtent čia animation-range tampa nepakeičiama.

Kas yra animation-range?

Savo esme animation-range leidžia apibrėžti konkretų slinkties laiko juostos segmentą, per kurį bus vykdoma jūsų CSS animacija. Įsivaizduokite slinkties laiko juostą kaip takelį nuo 0% iki 100%. Be animation-range, animacija, susieta su slinkties laiko juosta, paprastai būtų leidžiama per visą 0-100% tos laiko juostos diapazoną.

Tačiau, kas jei norite, kad elementas išnyktų tik tada, kai jis įeina į peržiūros sritį (tarkime, nuo 20% matomumo iki 80% matomumo)? O gal norite, kad sudėtinga transformacija įvyktų tik tada, kai vartotojas prascrollina pro tam tikrą sekciją, ir atvirkščiai, kai jis grįžta atgal?

animation-range suteikia šią tikslią kontrolę. Ji veikia kartu su animation-timeline ir jūsų @keyframes apibrėžimais, kad pasiūlytų smulkiagrūdį efektų derinimą. Iš esmės tai yra verčių pora – pradžios taškas ir pabaigos taškas – kurie apibrėžia aktyviąją slinkties laiko juostos dalį tam tikrai animacijai.

Palyginkite tai su animation-duration tradicinėse laiku paremtose animacijose. animation-duration nustato, kiek laiko trunka animacija. Su slinkimu valdomomis animacijomis, „trukmė“ faktiškai nustatoma pagal tai, kiek slinkimo reikia, kad būtų pereitas apibrėžtas animation-range. Kuo greitesnis slinkimas, tuo greičiau animacija paleidžiama per savo diapazoną.

Gilus pasinėrimas į animation-range savybes

animation-range savybė yra trumpinys animation-range-start ir animation-range-end savybėms. Išnagrinėkime kiekvieną iš jų detaliai, kartu su jų galingu priimtinų verčių rinkiniu.

animation-range-start ir animation-range-end

Šios savybės apibrėžia animacijos aktyviojo diapazono pradžios ir pabaigos taškus susijusioje slinkties laiko juostoje. Jas galima nurodyti atskirai arba sujungti naudojant animation-range trumpinį.

• animation-range-start: Apibrėžia tašką slinkties laiko juostoje, kur animacija turėtų prasidėti.
• animation-range-end: Apibrėžia tašką slinkties laiko juostoje, kur animacija turėtų baigtis.

Šioms savybėms pateiktos vertės yra santykinės pasirinktai animation-timeline. Naudojant scroll() laiko juostą, tai paprastai reiškia konteinerio slinkties progresą. Naudojant view() laiko juostą, tai reiškia elemento įėjimą/išėjimą iš peržiūros srities.

Trumpinys animation-range

Trumpinio savybė leidžia glaustai nustatyti tiek pradžios, tiek pabaigos taškus:

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

Jei pateikiama tik viena vertė, ji nustato tiek animation-range-start, tiek animation-range-end tą pačią vertę, o tai reiškia, kad animacija būtų paleista akimirksniu tame taške (nors paprastai tai nėra naudinga tęstinėms animacijoms).

Priimtinos animation-range vertės

Būtent čia animation-range išties suspindi, siūlydama gausų raktinių žodžių ir tikslių matavimų rinkinį:

1. Procentai (pvz., 20%, 80%)

Procentai apibrėžia animacijos pradžios ir pabaigos taškus kaip procentinę dalį nuo visos slinkties laiko juostos ilgio. Tai ypač intuityvu naudojant scroll() laiko juostas.

• Pavyzdys: Animacija, kuri išryškina elementą, kai vartotojas slenka per vidurinę puslapio dalį.

.fade-in-middle {\n  animation: fadeIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 70%; /* Starts at 30% scroll, ends at 70% scroll */\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}

Šiame pavyzdyje fadeIn animacija veiks tik tada, kai pagrindinio slinkties konteinerio slinkties pozicija yra tarp 30% ir 70% viso slankiojo aukščio. Jei vartotojas slinks greičiau, animacija tame diapazone bus baigta greičiau; jei jis slinks lėčiau, ji vyks laipsniškiau.

2. Ilgiai (pvz., 200px, 10em)

Ilgiai apibrėžia animacijos pradžios ir pabaigos taškus kaip absoliutų atstumą slinkties laiko juostoje. Tai rečiau naudojama bendram puslapio slinkimui, bet gali būti naudinga animacijoms, susietoms su konkrečiomis elementų pozicijomis arba dirbant su fiksuoto dydžio slinkties konteineriais.

• Pavyzdys: Animacija horizontaliai slenkančioje nuotraukų galerijoje, kuri paleidžiama per pirmuosius 500px slinkimo.

.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. Raktiniai žodžiai view() laiko juostoms

Šie raktiniai žodžiai yra ypač galingi, kai naudojami su view() laiko juosta, leidžiantys tiksliai valdyti animacijos elgseną, kai elementas įeina į peržiūros sritį ar slinkties konteinerį arba iš jo išeina.

• entry: Animacijos diapazonas prasideda, kai elemento slinkties prievado riba kerta jį talpinančio bloko entry tašką. Paprastai tai reiškia, kai elemento pirmoji kraštinė pradeda matytis peržiūros srityje.
• exit: Animacijos diapazonas baigiasi, kai elemento slinkties prievado riba kerta jį talpinančio bloko exit tašką. Paprastai tai reiškia, kai elemento paskutinė kraštinė dingsta iš peržiūros srities.
• cover: Animacija paleidžiama per visą laiką, kol elementas *dengia* savo slinkties konteinerį ar peržiūros sritį. Ji prasideda, kai elemento priekinė kraštinė įeina į slinkties prievadą, ir baigiasi, kai jo galinė kraštinė išeina. Tai dažnai yra numatytoji arba intuityviausia elgsena elemento matomumo animacijai.
• contain: Animacija paleidžiama, kol elementas yra *visiškai esantis* savo slinkties konteineryje/peržiūros srityje. Ji prasideda, kai elementas yra visiškai matomas, ir baigiasi, kai bet kuri jo dalis pradeda išeiti.
• start: Panašu į entry, bet konkrečiai nurodo slinkties prievado pradžios kraštinę elemento atžvilgiu.
• end: Panašu į exit, bet konkrečiai nurodo slinkties prievado pabaigos kraštinę elemento atžvilgiu.

Šie raktiniai žodžiai taip pat gali būti derinami su ilgio ar procentų poslinkiu, suteikiant dar smulkesnę kontrolę. Pavyzdžiui, entry 20% reiškia, kad animacija prasideda, kai elementas yra 20% įėjęs į peržiūros sritį.

• Pavyzdys: Prilimpanti navigacijos juosta, kuri keičia spalvą, kai „dengia“ pagrindinę sekciją.

.hero-section {\n  height: 500px;\n  /* ... other styles ... */\n}\n\n.sticky-nav {\n  position: sticky;\n  top: 0;\n  animation: navColorChange 1s linear forwards;\n  animation-timeline: view(); /* Relative to its own view in the scrollport */\n  animation-range: cover;\n}\n\n@keyframes navColorChange {\n  0% { background-color: transparent; color: white; }\n  100% { background-color: #333; color: gold; }\n}

Šiuo atveju, kai .sticky-nav elementas (arba elementas, kurio view() laiko juosta yra susieta) dengia peržiūros sritį, navColorChange animacija progresuoja.

• Pavyzdys: Paveikslėlis, kuris subtiliai padidėja, kai įeina į peržiūros sritį, ir vėl sumažėja, kai iš jos išeina.

.image-wrapper {\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 20% cover 80%; /* Starts when 20% of element is visible, plays until 80% of element has covered the view */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.05); } /* Max scale when roughly centered */\n  100% { transform: scale(1); }\n}

Tai iliustruoja, kaip animation-range gali susieti view() laiko juostos dalis su skirtingais @keyframes animacijos etapais.

4. normal (Numatytoji)

Raktinis žodis normal yra numatytoji animation-range vertė. Jis nurodo, kad animacija turėtų veikti per visą pasirinktos slinkties laiko juostos ilgį (nuo 0% iki 100%).

Nors dažnai tinkama, normal gali nesuteikti tikslaus laiko nustatymo, reikalingo sudėtingiems efektams, būtent todėl animation-range siūlo smulkesnę kontrolę.

Praktiniai pritaikymai ir naudojimo atvejai

animation-range galia slypi jos gebėjime atgaivinti sudėtingus, interaktyvius slinkimo efektus su minimaliomis pastangomis ir maksimaliu našumu. Panagrinėkime keletą įtikinamų naudojimo atvejų, kurie gali pagerinti vartotojo patirtį pasauliniu mastu, nuo e-komercijos svetainių iki edukacinių platformų.

Paralakso slinkimo efektai

Paralaksas, kai fono turinys juda skirtingu greičiu nei priekinio plano turinys, sukuria gylio iliuziją. Tradiciškai tai buvo pagrindinis kandidatas JavaScript. Su animation-range tai tampa daug paprasčiau.

Įsivaizduokite kelionių svetainę, pristatančią kelionių kryptis. Vartotojui slenkant, fono paveikslėlis su miesto panorama galėtų lėtai slinkti, o priekinio plano elementai, tokie kaip tekstas ar mygtukai, judėtų normaliu greičiu. Apibrėžę scroll(root) laiko juostą ir pritaikę transform: translateY() animaciją su apibrėžtu animation-range, galite pasiekti sklandų paralaksą be sudėtingų skaičiavimų.

.parallax-background {\n  animation: moveBackground var(--parallax-speed) linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%; /* Or a specific section range */\n}\n\n@keyframes moveBackground {\n  from { transform: translateY(0); }\n  to { transform: translateY(-100px); } /* Moves up 100px over full scroll */\n}

animation-range užtikrina, kad paralakso efektas būtų sinchronizuotas su bendru dokumento slinkimu, suteikiant sklandžią ir įtraukiančią patirtį.

Elementų atidengimo animacijos

Dažnas UI modelis yra atidengti elementus (išnykti, paslinkti aukštyn, išsiplėsti), kai jie patenka į vartotojo peržiūros sritį. Tai atkreipia dėmesį į naują turinį ir sukuria progreso jausmą.

Apsvarstykite internetinių kursų platformą: vartotojui slenkant per pamoką, kiekvienas naujas skyriaus pavadinimas ar paveikslėlis galėtų grakščiai išnykti ir įslinkti į vaizdą. Naudojant animation-timeline: view() kartu su animation-range: entry 0% cover 50%, galite nurodyti, kad elementas išnyksta iš visiškai permatomo iki visiškai nepermatomo, kai jis patenka į peržiūros sritį ir pasiekia jos vidurį.

.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%; /* Starts when 10% visible, ends when 50% visible */\n}\n\n@keyframes revealItem {\n  to { opacity: 1; transform: translateY(0); }\n}

Šis požiūris leidžia turinio įkėlimui atrodyti dinamiškesniam ir patrauklesniam, nesvarbu, ar tai produkto aprašymas e-komercijos svetainėje, ar tinklaraščio įrašo skyrius naujienų portale.

Progreso indikatoriai

Ilgų straipsnių, vartotojo vadovų ar daugiapakopių formų atveju progreso indikatorius gali žymiai pagerinti naudojimąsi, rodydamas vartotojams, kur jie yra ir kiek liko. Dažnas modelis yra skaitymo progreso juosta peržiūros srities viršuje.

Galite sukurti ploną juostą puslapio viršuje ir susieti jos plotį su dokumento slinkties progresu. Naudojant animation-timeline: scroll(root) ir animation-range: 0% 100%, juostos plotis gali plėstis nuo 0% iki 100%, kai vartotojas slenka nuo puslapio viršaus iki apačios.

.progress-bar {\n  position: fixed;\n  top: 0; left: 0;\n  height: 5px;\n  background-color: #007bff;\n  width: 0%; /* Initial state */\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}

Tai suteikia aiškų vizualinį signalą, kuris pagerina naršymą ir sumažina vartotojų nusivylimą turininguose puslapiuose, o tai yra vertinga funkcija pasauliniam turinio vartojimui.

Sudėtingos daugiapakopės animacijos

animation-range išties suspindi organizuojant sudėtingas sekas, kuriose skirtingos animacijos turi būti paleistos per konkrečius, nesutampančius vienos slinkties laiko juostos segmentus.

Įsivaizduokite „mūsų įmonės istorijos“ puslapį. Vartotojui slenkant, jis praeina pro „etapų“ sekcijas. Kiekvienas etapas galėtų suaktyvinti unikalią animaciją:

• 1 etapas: Grafika sukasi ir plečiasi (animation-range: 10% 20%)
• 2 etapas: Laiko juostos elementas įslenka iš šono (animation-range: 30% 40%)
• 3 etapas: Iššoka citatos burbulas (animation-range: 50% 60%)

Atsargiai apibrėždami diapazonus, galite sukurti vientisą ir interaktyvią pasakojimo patirtį, nukreipdami vartotojo dėmesį per skirtingas turinio dalis, kai jie slenka.

.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/* ... and so on ... */\n

Šis kontrolės lygis leidžia sukurti labai pritaikytas ir firmines pasakojimo patirtis, kurios rezonuoja su įvairiomis auditorijomis.

Interaktyvus pasakojimas

Be paprastų atidengimų, animation-range palengvina turtingus, interaktyvius pasakojimus, dažnai matomus produktų pristatymo puslapiuose ar redakciniame turinyje. Elementai gali augti, mažėti, keisti spalvą ar net transformuotis į skirtingas formas, kai vartotojas slenka per istoriją.

Apsvarstykite produkto pristatymo puslapį. Vartotojui slenkant žemyn, produkto vaizdas gali lėtai suktis, kad atskleistų skirtingus kampus, o funkcijų tekstas tuo pačiu metu išnyktų. Šis sluoksniuotas požiūris palaiko vartotojų įsitraukimą ir suteikia dinamišką būdą pateikti informaciją, nereikalaujant viso vaizdo įrašo.

Tiksli kontrolė, kurią siūlo animation-range, leidžia dizaineriams ir kūrėjams choreografuoti šias patirtis tiksliai taip, kaip numatyta, užtikrinant sklandų ir apgalvotą srautą vartotojui, nepriklausomai nuo jo slinkimo greičio.

Slinkimu valdomų animacijų nustatymas

CSS slinkimu valdomų animacijų su animation-range įgyvendinimas apima kelis pagrindinius žingsnius. Pereikime per esminius komponentus.

scroll() ir view() laiko juostų apžvalga

Jūsų pirmasis sprendimas yra, prie kurios slinkties laiko juostos pririšti savo animaciją:

• scroll(): Tai idealu animacijoms, kurios reaguoja į bendrą dokumento slinkimą arba konkretaus konteinerio slinkimą.
• Sintaksė: scroll([ || ]?)
  Pavyzdžiui, scroll(root) pagrindiniam dokumento slinkimui, scroll(self) paties elemento slinkties konteineriui, arba scroll(my-element-id y) pasirinktinio elemento vertikaliam slinkimui.
• view(): Tai geriausia animacijoms, kurias suaktyvina elemento matomumas jo slinkties konteineryje (dažniausiai peržiūros srityje).
• Sintaksė: view([ || ]?)
  Pavyzdžiui, view() numatytajai peržiūros srities laiko juostai, arba view(block) animacijoms, susietoms su bloko ašies matomumu. Taip pat galite pavadinti peržiūros laiko juostą naudodami view-timeline-name tėviniame/protėvių elemente.

Svarbu tai, kad animation-timeline turėtų būti taikoma elementui, kurį norite animuoti, nebūtinai pačiam slinkties konteineriui (nebent tas elementas yra slinkties konteineris).

Animacijos apibrėžimas su @keyframes

Jūsų animacijos vizualiniai pokyčiai yra apibrėžiami naudojant standartines @keyframes taisykles. Skirtumas yra tas, kaip šie kadrai susiejami su slinkties laiko juosta.

Kai animacija yra susieta su slinkties laiko juosta, procentai @keyframes viduje (nuo 0% iki 100%) nebeatspindi laiko. Vietoj to, jie atspindi progresą per nurodytą animation-range. Jei jūsų animation-range yra 20% 80%, tada 0% jūsų @keyframes atitinka 20% slinkties laiko juostos, o 100% jūsų @keyframes atitinka 80% slinkties laiko juostos.

Tai yra galingas konceptualus pokytis: jūsų kadrai apibrėžia visą animacijos seką, o animation-range apkerpa ir susieja tą seką su konkrečiu slinkties segmentu.

animation-timeline ir animation-range taikymas

Sujunkime viską kartu su praktiniu pavyzdžiu: elementas, kuris šiek tiek padidėja, kai tampa visiškai matomas peržiūros srityje, ir tada vėl sumažėja, kai iš jos išeina.

HTML struktūra:

\n  \n  
Hello World
\n  \n

CSS stilius:

.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  /* Pagrindinės slinkimu valdomos animacijos savybės */\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view(); /* Animacija progresuoja, kai šis elementas patenka į matomumo lauką/išeina iš jo */\n  animation-range: entry 20% cover 80%; /* Animacija veikia nuo tada, kai matoma 20% elemento, iki tol, kol 80% jo padengia matomumo lauką */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(0.8); opacity: 0; }\n  50% { transform: scale(1.1); opacity: 1; } /* Didžiausias mastelis ir skaidrumas maždaug pusiaukelėje per aktyvųjį diapazoną */\n  100% { transform: scale(0.9); opacity: 1; }\n}

Šiame pavyzdyje:

• animation-timeline: view() užtikrina, kad animaciją valdo .animated-element matomumas peržiūros srityje.
• animation-range: entry 20% cover 80% apibrėžia animacijos aktyviąją zoną: ji prasideda, kai elementas yra 20% įėjęs į peržiūros sritį (nuo jo priekinės kraštinės), ir veikia iki tol, kol 80% elemento padengia peržiūros sritį (nuo jo priekinės kraštinės).
• @keyframes scaleOnView apibrėžia transformaciją. 0% kadrų atitinka entry 20% peržiūros laiko juostos, 50% kadrų atitinka diapazono nuo `entry 20%` iki `cover 80%` vidurį, o 100% atitinka cover 80%.
• animation-duration: 1s ir animation-fill-mode: forwards vis dar yra aktualūs. Trukmė veikia kaip „greičio daugiklis“; ilgesnė trukmė priverčia animaciją atrodyti lėtesnę savo diapazone tam tikram slinkimo atstumui. forwards užtikrina, kad animacijos galutinė būsena išliktų.

Šis nustatymas suteikia neįtikėtinai galingą ir intuityvų būdą valdyti slinkimu paremtas animacijas vien tik CSS.

Pažangios technikos ir svarstymai

Be pagrindų, animation-range sklandžiai integruojasi su kitomis CSS animacijos savybėmis ir reikalauja atsižvelgti į našumą bei suderinamumą.

animation-range derinimas su animation-duration ir animation-fill-mode

Nors slinkimu valdomos animacijos neturi fiksuotos „trukmės“ tradicine prasme (nes tai priklauso nuo slinkimo greičio), animation-duration vis dar atlieka svarbų vaidmenį. Ji apibrėžia „tikslinę trukmę“, per kurią animacija turi užbaigti visą savo kadrų seką, jei ji būtų leidžiama „normaliu“ greičiu per nurodytą diapazoną.

• Ilgesnė animation-duration reiškia, kad animacija atrodys lėtesnė per nurodytą animation-range.
• Trumpesnė animation-duration reiškia, kad animacija atrodys greitesnė per nurodytą animation-range.

animation-fill-mode taip pat išlieka svarbi. forwards dažniausiai naudojama siekiant užtikrinti, kad animacijos galutinė būsena išliktų, kai aktyvus animation-range buvo pereitas. Be jos elementas gali grįžti į pradinę būseną, kai vartotojas prascrollina už apibrėžto diapazono.

Pavyzdžiui, jei norite, kad elementas liktų išnykęs po to, kai jis pateko į peržiūros sritį, animation-fill-mode: forwards yra būtina.

Kelių animacijų valdymas viename elemente

Vienam elementui galite pritaikyti kelias slinkimu valdomas animacijas. Tai pasiekiama pateikiant kableliais atskirtą verčių sąrašą animation-name, animation-timeline ir animation-range (ir kitoms animacijos savybėms).

Pavyzdžiui, elementas galėtų vienu metu išnykti, kai patenka į matomumo lauką, ir suktis, kai jį dengia:

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

Tai parodo tikslaus derinimo galią, leidžiančią skirtingus elemento išvaizdos aspektus valdyti skirtingais slinkties laiko juostos segmentais.

Poveikis našumui

Vienas iš pagrindinių CSS slinkimu valdomų animacijų, įskaitant animation-range, privalumų yra jų įgimti našumo pranašumai. Perkėlus slinkimo susiejimo logiką iš JavaScript į naršyklės atvaizdavimo variklį:

• Pagrindinės gijos atlaisvinimas: Animacijos gali veikti kompozitoriaus gijoje, atlaisvindamos pagrindinę JavaScript giją kitoms užduotims, o tai lemia sklandesnes sąveikas.
• Optimizuotas atvaizdavimas: Naršyklės yra labai optimizuotos CSS animacijoms ir transformacijoms, dažnai naudojant GPU pagreitį.
• Sumažintas trūkčiojimas: Mažesnis pasikliovimas JavaScript slinkimo įvykiams gali žymiai sumažinti „trūkčiojimą“ (strigimą ar netolygumą), kuris gali atsirasti, kai slinkimo įvykių klausytojai yra perkrauti.

Tai virsta sklandesne ir jautresne vartotojo patirtimi, ypač svarbia pasaulinei auditorijai, kuri lankosi svetainėse naudodama įvairius įrenginius ir tinklo sąlygas.

Naršyklių suderinamumas

Nuo 2023 m. pabaigos / 2024 m. pradžios CSS slinkimu valdomos animacijos (įskaitant animation-timeline ir animation-range) daugiausia palaikomos Chromium pagrindu veikiančiose naršyklėse (Chrome, Edge, Opera, Brave ir kt.).

Dabartinė būsena:

• Chrome: Visiškai palaikoma (nuo Chrome 115)
• Edge: Visiškai palaikoma
• Firefox: Kuriama / už vėliavėlių
• Safari: Kuriama / už vėliavėlių

Atsarginės strategijos:

• Funkcijų užklausos (@supports): Naudokite @supports (animation-timeline: scroll()), kad taikytumėte slinkimu valdomas animacijas tik tada, kai jos palaikomos. Pateikite paprastesnį, neanimuotą arba JavaScript pagrįstą atsarginį variantą nepalaikančioms naršyklėms.
• Progresyvus tobulinimas: Kurkite savo turinį taip, kad jis būtų visiškai prieinamas ir suprantamas net be šių pažangių animacijų. Animacijos turėtų pagerinti, o ne būti kritiškai svarbios vartotojo patirčiai.

Atsižvelgiant į greitą interneto standartų raidą, artimiausioje ateityje tikimasi platesnio naršyklių palaikymo. Rekomenduojama stebėti tokius išteklius kaip „Can I Use...“, kad gautumėte naujausią suderinamumo informaciją.

Slinkimu valdomų animacijų derinimas

Šių animacijų derinimas gali būti nauja patirtis. Šiuolaikiniai naršyklių kūrėjų įrankiai, ypač Chromium, tobulėja, kad suteiktų puikų palaikymą:

• Animacijų skirtukas: Chrome DevTools skirtukas „Animations“ yra neįkainojamas. Jame rodomos visos aktyvios animacijos, leidžiama jas sustabdyti, paleisti iš naujo ir peržiūrėti. Slinkimu valdomoms animacijoms jis dažnai pateikia vizualų slinkties laiko juostos ir aktyvaus diapazono atvaizdavimą.
• Elementų skydelis: Tikrinant elementą „Elements“ skydelyje ir žiūrint į „Styles“ skirtuką, bus rodomos pritaikytos animation-timeline ir animation-range savybės.
• Slinkties laiko juostos perdanga: Kai kurios naršyklės siūlo eksperimentinę perdangą, leidžiančią vizualizuoti slinkties laiko juostą tiesiogiai puslapyje, padedant suprasti, kaip slinkties pozicija susiejama su animacijos progresu.

Susipažinimas su šiais įrankiais žymiai paspartins kūrimo ir tobulinimo procesą.

Geriausios praktikos pasauliniam įgyvendinimui

Nors animation-range suteikia neįtikėtiną kūrybinę laisvę, atsakingas įgyvendinimas yra raktas į teigiamos patirties užtikrinimą vartotojams visame pasaulyje, nepriklausomai nuo jų fono ir įrenginių.

Prieinamumo aspektai

Judėjimas gali būti dezorientuojantis ar net žalingas kai kuriems vartotojams, ypač tiems, kurie turi vestibuliarinių sutrikimų ar judesio ligą. Visada apsvarstykite:

• prefers-reduced-motion medijos užklausa: Gerbkite vartotojų nuostatas. Vartotojams, kurie savo operacinės sistemos nustatymuose įjungė „Sumažinti judesį“, jūsų animacijos turėtų būti žymiai sumažintos arba visiškai pašalintos.

@media (prefers-reduced-motion) {\n  .animated-element {\n    animation: none !important; /* Išjungti animacijas */\n    transform: none !important; /* Atstatyti transformacijas */\n    opacity: 1 !important; /* Užtikrinti matomumą */\n  }\n}

Tai yra kritinė prieinamumo geriausia praktika visoms animacijoms, įskaitant slinkimu valdomas.

• Venkite pernelyg didelio judėjimo: Net kai įjungta, venkite staigių, greitų ar didelio masto judesių, kurie galėtų blaškyti ar būti nepatogūs. Subtilios animacijos dažnai yra efektyvesnės.
• Užtikrinkite įskaitomumą: Įsitikinkite, kad tekstas ir svarbus turinys išlieka įskaitomi visos animacijos metu. Venkite animuoti tekstą taip, kad jis taptų neįskaitomas ar mirgėtų.

Atsakingas dizainas

Animacijos turi gerai atrodyti ir veikti įvairiuose įrenginiuose, nuo didelių stalinių monitorių iki mažų mobiliųjų telefonų. Apsvarstykite:

• Peržiūros sritimi paremtos vertės: Naudojant santykinius vienetus, tokius kaip procentai, vw, vh transformacijoms ar pozicionavimui kadruose, galima padėti animacijoms grakščiai prisitaikyti.
• Medijos užklausos animacijos diapazonui: Galbūt norėsite skirtingų animation-range verčių ar net visiškai skirtingų animacijų, atsižvelgiant į ekrano dydį. Pavyzdžiui, sudėtingas slinkimu valdomas pasakojimas gali būti supaprastintas mobiliesiems įrenginiams, kur ekrano erdvė ir našumas yra labiau riboti.
• Testavimas įvairiuose įrenginiuose: Visada testuokite savo slinkimu valdomas animacijas tikruose įrenginiuose arba naudodami patikimą įrenginių emuliaciją DevTools, kad aptiktumėte bet kokius našumo trūkumus ar išdėstymo problemas.

Progresyvus tobulinimas

Kaip minėta naršyklių suderinamumo skyriuje, užtikrinkite, kad jūsų pagrindinis turinys ir funkcionalumas niekada nepriklausytų nuo šių pažangių animacijų. Vartotojai senesnėse naršyklėse arba tie, kurie turi sumažinto judesio nustatymus, vis tiek turėtų turėti pilną ir patenkinamą patirtį. Animacijos yra patobulinimas, o ne reikalavimas.

Tai reiškia, kad jūsų HTML ir CSS turi būti struktūrizuoti taip, kad turinys būtų semantiškai teisingas ir vizualiai patrauklus net tada, kai neįkeliamas joks JavaScript ar pažangios CSS animacijos.

Našumo optimizavimas

Nors natūralios CSS animacijos yra našios, prasti pasirinkimai vis tiek gali sukelti problemų:

• Animuokite transform ir opacity: Šios savybės idealiai tinka animacijai, nes dažnai jas gali apdoroti kompozitorius, išvengiant išdėstymo ir piešimo darbo. Venkite animuoti tokias savybes kaip width, height, margin, padding, top, left, right, bottom, jei įmanoma, nes jos gali sukelti brangius išdėstymo perskaičiavimus.
• Ribokite sudėtingus efektus: Nors vilioja, venkite taikyti per daug vienu metu vykstančių, labai sudėtingų slinkimu valdomų animacijų, ypač keliems elementams vienu metu. Raskite pusiausvyrą tarp vizualinio turtingumo ir našumo.
• Naudokite aparatinį pagreitį: Savybės, tokios kaip transform: translateZ(0) (nors dažnai nebereikalingos su šiuolaikinėmis naršyklėmis ir transform animacijomis), kartais gali padėti priversti elementus atsidurti savo kompoziciniuose sluoksniuose, dar labiau padidinant našumą.

Realaus pasaulio pavyzdžiai ir įkvėpimai

Kad dar labiau sustiprintumėte savo supratimą ir įkvėptumėte kitam projektui, konceptualizuokime keletą realaus pasaulio animation-range pritaikymų:

• Įmonių metinės ataskaitos: Įsivaizduokite interaktyvią metinę ataskaitą, kurioje finansinės diagramos animuojasi į vaizdą, pagrindiniai veiklos rodikliai (KPI) skaičiuojasi aukštyn, o įmonės etapai pabrėžiami subtiliais vizualiniais ženklais, kai vartotojas slenka per dokumentą. Kiekvienas skyrius galėtų turėti savo specifinį animation-range, sukuriant vedamą skaitymo patirtį.
• Produktų vitrinos (E-komercija): Naujo įrenginio produkto detalės puslapyje pagrindinis produkto vaizdas galėtų lėtai suktis ar priartėti, kai vartotojas slenka, atskleisdamas funkcijas sluoksnis po sluoksnio. Priedų vaizdai galėtų paeiliui iššokti, kai jų aprašymai tampa matomi. Tai paverčia statinį puslapį dinamišku tyrinėjimu.
• Edukacinio turinio platformos: Sudėtingoms mokslinėms koncepcijoms ar istoriniams laiko juostoms slinkimu valdomos animacijos gali iliustruoti procesus. Diagrama galėtų susikurti dalimis, o istorinis žemėlapis galėtų animuoti, rodydamas kariuomenės judėjimą, visa tai sinchronizuota su vartotojo slinkimo gyliu. Tai palengvina supratimą ir įsiminimą.
• Renginių svetainės: Festivalio svetainėje galėtų būti „atlikėjų atskleidimas“, kur atlikėjų nuotraukos ir vardai animuojasi į vaizdą tik tada, kai jų skyrius tampa matomas. Tvarkaraščio skyrius galėtų pabrėžti dabartinį laiko tarpą subtiliu fono pasikeitimu, kai vartotojas pro jį prascrollina.
• Meno portfolio: Menininkai gali naudoti animation-range, kad sukurtų unikalias savo darbų vitrinas, kur kiekvienas kūrinys atidengiamas su individualia animacija, pritaikyta jo stiliui, sukuriant įsimintiną ir menišką naršymo patirtį.

Šie pavyzdžiai pabrėžia animation-range universalumą ir išraiškingą galią. Kūrybiškai mąstydami apie tai, kaip slinkimas gali valdyti pasakojimą ir atskleisti turinį, kūrėjai gali sukurti tikrai unikalias ir patrauklias skaitmenines patirtis, kurios išsiskiria perpildytoje interneto erdvėje.

Išvada

CSS Animation Range, kartu su animation-timeline, reiškia reikšmingą šuolį į priekį natūralių interneto animacijos galimybių srityje. Ji siūlo front-end kūrėjams precedento neturintį deklaratyvios kontrolės lygį slinkimu valdomiems efektams, perkeliant sudėtingas sąveikas iš sudėtingų JavaScript bibliotekų srities į našesnę ir lengviau prižiūrimą gryno CSS sritį.

Tiksliai apibrėždami animacijos pradžios ir pabaigos taškus slinkties laiko juostoje, galite sukurti kvapą gniaužiančius paralakso efektus, patrauklius turinio atidengimus, dinamiškus progreso indikatorius ir sudėtingus daugiapakopius pasakojimus. Našumo pranašumai, kartu su CSS natūralių sprendimų elegancija, daro tai galingu papildymu bet kurio kūrėjo įrankių rinkiniui.

Nors naršyklių palaikymas vis dar konsoliduojasi, progresyvaus tobulinimo strategija užtikrina, kad galite pradėti eksperimentuoti ir diegti šias funkcijas jau šiandien, suteikdami pažangiausias patirtis vartotojams šiuolaikinėse naršyklėse ir grakščiai pateikdami atsarginius variantus kitiems.

Internetas yra nuolat besikeičianti drobė. Pasinaudokite CSS Animation Range, kad pieštumėte gyvybingesnes, interaktyvesnes ir našesnes vartotojo patirtis. Pradėkite eksperimentuoti, kurkite nuostabius dalykus ir prisidėkite prie dinamiškesnio ir patrauklesnio skaitmeninio pasaulio visiems.