Er zijn enkele scroll-animaties die mogelijk zijn in CSS zonder JavaScript. Kijk maar naar het hoofdstuk over de Scroll Indicator, dat duidelijk CSS-magie is. Maar we kunnen veel scrollanimatiewerk direct in CSS doen met slechts een klein beetje informatie van JavaScript: hoe ver de pagina is gescrolld.
Dus laten we dat uit de weg ruimen. Met een JavaScript-one-liner kunnen we een aangepaste CSS-eigenschap instellen die het percentage van de gescrolde pagina kent:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Nu hebben we --scrolleen waarde die we kunnen gebruiken in de CSS.
Deze truc is afkomstig van Scott Kellum, die behoorlijk de CSS-trucmeester is!
Laten we een animatie opzetten zonder die waarde eerst te gebruiken. Dit is een eenvoudige draaiende animatie voor een SVG-element dat voor altijd zal draaien en draaien:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Hier komt de truc! Laten we nu deze animatie pauzeren. In plaats van het over een bepaalde periode te animeren, animeren we het via de schuifpositie door de aan te passen animation-delayterwijl de pagina schuift. Als de animation-duration1s is, betekent dat scrollen over de hele lengte van de pagina. is een herhaling van de animatie.
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); ) Probeer de animation-durationnaar 0.5s. Dat zorgt ervoor dat twee animaties kunnen worden aangevuld met de animation-delaywiskunde.
Scott merkte in zijn originele demo op dat ook:
animation-iteration-count: 1; animation-fill-mode: both;Goed voor wat "doorschiet" gekheid en ik kan bevestigen dat ik het ook heb gezien, vooral op korte viewports, dus het is de moeite waard om deze ook in te stellen.
Scott heeft ook de scroll-gerelateerde animatie-eigenschappen op de :root ()zelf ingesteld, wat betekent dat het alle animaties op de pagina tegelijk kan besturen. Hier is zijn demo die drie animaties tegelijkertijd bestuurt: