Der er nogle rulleanimationer, der er mulige i CSS uden JavaScript overhovedet. Se bare på kapitlet om rulleindikatoren, som helt klart er CSS-magi. Men vi kan udføre en masse rulleanimationsarbejde direkte i CSS med kun en lille smule information leveret af JavaScript: hvor langt siden har rullet.
Så lad os få det af vejen. Med en JavaScript-linie kan vi indstille en tilpasset CSS-egenskab, der kender procentdelen af siden, der er rullet:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Nu har vi --scrollsom en værdi, vi kan bruge i CSS.
Dette trick kommer ved hjælp af Scott Kellum, der er ganske CSS-trickmaster!
Lad os oprette en animation uden først at bruge den værdi. Dette er en simpel roterende animation til et SVG-element, der vil dreje og dreje for evigt:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Her kommer tricket! Lad os nu sætte denne animation på pause. I stedet for at animere det over en tidsperiode animerer vi det via rullepositionen ved at justere, animation-delaynår siden ruller. Hvis det animation-durationer 1s, betyder det at rulle hele sidens længde. er en iteration af animationen.
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 at ændre animation-durationtil 0.5s. Det giver mulighed for to animationer kan afsluttes med animation-delaymatematikken.
Scott bemærkede i sin originale demo, at også indstilling:
animation-iteration-count: 1; animation-fill-mode: both;Stod for noget “overskrid” underligt, og jeg kan bevidne, at jeg også har set det, især på korte visningsport, så det er også værd at indstille disse.
Scott indstillede også de rulningsrelaterede animationsegenskaber på sig :root ()selv, hvilket betyder, at den kunne kontrollere alle animationerne på siden på én gang. Her er hans demo, der styrer tre animationer samtidigt:
