Yra keletas slinkties animacijų, kurias CSS galima naudoti be jokio „JavaScript“. Tiesiog pažiūrėkite į skyrių apie slinkimo indikatorių, kuris akivaizdžiai yra CSS magija. Tačiau mes galime atlikti daugybę slinkimo animacijos darbų tiesiogiai CSS, turėdami tik šiek tiek informacijos, kurią teikia „JavaScript“: kiek toli puslapis slinko.
Taigi pašalinkime tai iš kelio. Naudodami „JavaScript“ vienos linijos, galime nustatyti pasirinktinę CSS ypatybę, kuri žino slinkto puslapio procentą:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Dabar mes turime --scrollvertę, kurią galime naudoti CSS.
Šis triukas yra Scottas Kellumas, kuris yra CSS gudrybių meistras!
Nustatykime animaciją iš pradžių nenaudodami šios vertės. Tai yra paprasta besisukanti SVG elemento animacija, kuri suksis ir suksis amžinai:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Čia ateina triukas! Dabar pristabdykime šią animaciją. Užuot animavę jį tam tikru laikotarpiu, mes jį animuosime per slinkties padėtį, sureguliuodami animation-delaypuslapį slenkant. Jei animation-durationyra 1s, tai reiškia, kad reikia slinkti visą puslapio ilgį. yra viena animacijos iteracija.
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); ) Pabandykite pakeisti animation-durationį 0.5s. Tai leidžia atlikti dvi animacijas su animation-delaymatematika.
Scottas savo pirminėje demonstracinėje versijoje taip pat pažymėjo:
animation-iteration-count: 1; animation-fill-mode: both;Dėl tam tikrų „peržengiančių“ keistenybių aš galiu patvirtinti, kad ir aš tai mačiau, ypač trumpuose peržiūros languose, todėl verta nustatyti ir juos.
Skotas taip pat pats nustatė su slinkimu susijusias animacijos ypatybes :root (), o tai reiškia, kad jis vienu metu gali valdyti visas puslapio animacijas. Štai jo demonstracinė versija, kuri vienu metu valdo tris animacijas:
