Det finns några rullningsanimationer som är möjliga i CSS utan JavaScript alls. Titta bara på kapitlet om Scroll Indicator, som helt klart är CSS-magi. Men vi kan göra mycket rullningsanimationsarbete direkt i CSS med bara en liten information som tillhandahålls av JavaScript: hur långt sidan har rullat.
Så låt oss göra det ur vägen. Med en JavaScript-liner kan vi ställa in en anpassad CSS-egenskap som känner till procentandelen av sidan som rullas:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Nu har vi --scrollsom ett värde vi kan använda i CSS.
Detta trick kommer genom Scott Kellum som är ganska CSS trickery master!
Låt oss ställa in en animering utan att använda det värdet först. Detta är en enkel snurranimering för ett SVG-element som kommer att snurra och snurra för alltid:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Här kommer tricket! Låt oss nu pausa den här animationen. I stället för att animera det över en tidsperiod, animerar vi det via rullningspositionen genom att justera det animation-delaynär sidan rullar. Om det animation-durationär 1s betyder det att du rullar hela sidans längd. är en iteration av 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); ) Försök att ändra animation-durationtill 0.5s. Det möjliggör två animationer kan slutföras med animation-delaymatematiken.
Scott noterade i sin ursprungliga demo att också inställningen:
animation-iteration-count: 1; animation-fill-mode: both;Stod för en del "överskridande" konstighet och jag kan intyga att jag också har sett det, särskilt på korta visningsportar, så det är värt att ställa in dessa också.
Scott ställde också in de rullningsrelaterade animeringsegenskaperna på sig :root ()själva, vilket innebär att den kan styra alla animationer på sidan på en gång. Här är hans demo som styr tre animationer samtidigt: