Det er noen rulleanimasjoner som er mulige i CSS uten JavaScript i det hele tatt. Bare se på kapitlet om rulleindikatoren, som helt klart er CSS-magi. Men vi kan gjøre mye rulleanimasjonsarbeid direkte i CSS med bare en liten bit informasjon gitt av JavaScript: hvor langt siden har rullet.
Så la oss få det ut av veien. Med en JavaScript-linjeføring kan vi angi en egendefinert CSS-egenskap som vet prosentandelen av siden som er rullet:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Nå har vi --scrollsom en verdi vi kan bruke i CSS.
Dette trikset kommer av Scott Kellum, som er ganske CSS-trickmaster!
La oss sette opp en animasjon uten å bruke den verdien først. Dette er en enkel spinnende animasjon for et SVG-element som vil spinne og spinne for alltid:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Her kommer trikset! La oss nå stoppe denne animasjonen. I stedet for å animere det over en tidsperiode, vil vi animere det via rulleposisjonen ved å justere animation-delaynår siden ruller. Hvis det animation-durationer 1s, betyr det at du blar hele siden. er en iterasjon av animasjonen.
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); ) Prøv å endre animation-durationtil 0.5s. Det gir mulighet for to animasjoner kan fullføres med animation-delaymatematikken.
Scott bemerket i sin opprinnelige demo at også innstillingen:
animation-iteration-count: 1; animation-fill-mode: both;Stod for noe “overskudd” rare, og jeg kan bevitne at jeg har sett det også, spesielt på korte visningsfelt, så det er verdt å sette disse også.
Scott satte også rullerelaterte animasjonsegenskaper på seg :root ()selv, noe som betyr at den kan kontrollere alle animasjonene på siden samtidig. Her er hans demo som styrer tre animasjoner samtidig: