CSS-is on mõned kerimisanimatsioonid võimalikud ilma JavaScripti üldse. Vaadake lihtsalt peatükki Kerimisindikaator, mis on selgelt CSS-i maagia. Kuid me saame teha palju kerimisanimatsiooni otse CSS-is, kasutades vaid ühte JavaScripti pakutavat teavet: kui kaugele leht on kerinud.
Nii et laseme selle ära. JavaScripti üherealise abil saame määrata CSS-i kohandatud atribuudi, mis teab keritud lehe protsenti:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Nüüd on meil --scrollväärtus, mida saame CSS-is kasutada.
Selle triki saab Scott Kellum, kes on üsna CSS-i trikimeister!
Seadistame animatsiooni ilma seda väärtust esialgu kasutamata. See on lihtne pöörlev animatsioon SVG elemendile, mis pöörleb ja keerleb igavesti:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Siit tuleb trikk! Nüüd peatame selle animatsiooni. Selle asemel, et seda teatud aja jooksul animeerida, animeerime selle kerimisasendi kaudu, kohandades animation-delaylehe kerimisel. Kui väärtus animation-durationon 1, tähendab see kogu lehe pikkuse kerimist. on animatsiooni üks iteratsioon.
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); ) Proovige muuta animation-durationkuni 0.5s. See võimaldab kahte animatsiooni saab animation-delaymatemaatika abil täiendada .
Scott märkis oma esialgses demos, et ka:
animation-iteration-count: 1; animation-fill-mode: both;Arvestas mõningate "ületatud" veidrustega ja võin kinnitada, et olen seda ka ise näinud, eriti lühikeste vaateavade puhul, nii et tasub ka need seada.
Samuti määras Scott kerimisega seotud animatsiooni atribuudid :root ()endale, mis tähendab, et see suudab kõiki lehel olevaid animatsioone korraga juhtida. Siin on tema demo, mis juhib korraga kolme animatsiooni: