Ir dažas ritināšanas animācijas, kas CSS ir iespējamas bez JavaScript vispār. Vienkārši apskatiet nodaļu par ritināšanas indikatoru, kas nepārprotami ir CSS maģija. Bet mēs varam paveikt daudz ritināšanas animācijas darbu tieši CSS, tikai ar nelielu informāciju, ko nodrošina JavaScript: cik tālu lapa ir ritinājusi.
Tāpēc atbrīvosimies no tā. Izmantojot JavaScript vienrindu, mēs varam iestatīt pielāgotu CSS rekvizītu, kas zina ritinātās lapas procentuālo daļu:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Tagad mums ir --scrollvērtība, kuru mēs varam izmantot CSS.
Šis triks nāk no Skota Kelluma, kurš ir diezgan CSS triku meistars!
Iestatīsim animāciju, vispirms neizmantojot šo vērtību. Šī ir vienkārša vērpšanas animācija SVG elementam, kas griezīsies un griezīsies uz visiem laikiem:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Šeit nāk triks! Tagad apturēsim šo animāciju. Tā vietā, lai to animētu noteiktā laika posmā, mēs to animēsim, izmantojot ritināšanas pozīciju, pielāgojot animation-delaylapu ritināšanas laiku. Ja animation-durationir 1s, tas nozīmē, ka ritiniet visu lapas garumu. ir viena animācijas iterācija.
svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) Mēģiniet nomainīt animation-durationuz 0.5s. Tas ļauj divas animācijas var pabeigt ar animation-delaymatemātiku.
Skots savā sākotnējā demonstrācijā atzīmēja arī to, ka:
animation-iteration-count: 1; animation-fill-mode: both;Atsevišķi “pārsniegšanas” dīvainības veidojas, un es varu apliecināt, ka arī es to esmu redzējis, it īpaši īsos skatu punktos, tāpēc ir vērts arī tos iestatīt.
Skots arī pats iestatīja ar ritināšanu saistītās animācijas īpašības :root (), kas nozīmē, ka tas vienlaikus var kontrolēt visas lapas animācijas. Šeit ir viņa demonstrācija, kas vienlaikus kontrolē trīs animācijas: