Es gibt einige Bildlaufanimationen, die in CSS ohne JavaScript möglich sind. Schauen Sie sich einfach das Kapitel über den Bildlaufindikator an, das eindeutig CSS-Magie ist. Mit nur einer kleinen Information, die von JavaScript bereitgestellt wird, können wir viele Scroll-Animationsarbeiten direkt in CSS ausführen: Wie weit die Seite gescrollt hat.
Lassen Sie uns das aus dem Weg räumen. Mit einem JavaScript-Einzeiler können wir eine benutzerdefinierte CSS-Eigenschaft festlegen, die den Prozentsatz der gescrollten Seite kennt:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Jetzt haben wir --scrolleinen Wert, den wir im CSS verwenden können.
Dieser Trick kommt von Scott Kellum, der ziemlich der CSS-Trickmeister ist!
Lassen Sie uns eine Animation einrichten, ohne diesen Wert zuerst zu verwenden. Dies ist eine einfache Drehanimation für ein SVG-Element, das sich für immer dreht und dreht:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Hier kommt der Trick! Lassen Sie uns nun diese Animation anhalten. Anstatt es über einen bestimmten Zeitraum zu animieren, animieren wir es über die Bildlaufposition, indem wir es anpassen, animation-delaywährend die Seite rollt. Wenn das animation-duration1s ist, bedeutet dies, dass Sie über die gesamte Länge der Seite scrollen. ist eine Iteration der Animation.
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); ) Versuchen Sie, das animation-durationzu ändern 0.5s. Damit können zwei Animationen mit der animation-delayMathematik abgeschlossen werden.
Scott bemerkte in seiner ursprünglichen Demo, dass auch Einstellung:
animation-iteration-count: 1; animation-fill-mode: both;Ich kann bestätigen, dass ich es auch gesehen habe, insbesondere in kurzen Ansichtsfenstern. Es lohnt sich also, diese Einstellungen auch vorzunehmen.
Scott hat auch die scrollbezogenen Animationseigenschaften für sich :root ()selbst festgelegt, sodass alle Animationen auf der Seite gleichzeitig gesteuert werden können. Hier ist seine Demo, die drei Animationen gleichzeitig steuert: