Scroll-Animation

Es gibt einige Scroll-Animationen, die in CSS völlig ohne JavaScript möglich sind. Schauen Sie sich nur das Kapitel über den Scroll-Indikator an, was eindeutig CSS-Magie ist. Wir können jedoch eine Menge Scroll-Animationsarbeit direkt in CSS erledigen, indem wir nur eine kleine Information verwenden, die von JavaScript bereitgestellt wird: wie weit die Seite gescrollt wurde.

Bringen wir das also hinter uns. 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);

Nun haben wir --scroll als Wert, den wir im CSS verwenden können.

Dieser Trick stammt von Scott Kellum, der ein wahrer Meister der CSS-Tricksereien ist!

Richten wir zunächst eine Animation ohne die Verwendung dieses Wertes ein. Dies ist eine einfache Dreh-Animation für ein SVG-Element, das sich ewig drehen und drehen wird.

svg {
  display: inline-block;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
Sie verstehen schon. Es dreht sich. Ewig.

Hier kommt der Trick! Lassen Sie uns diese Animation nun pausieren. Anstatt sie über einen Zeitraum zu animieren, animieren wir sie über die Scroll-Position, indem wir den animation-delay anpassen, während die Seite scrollt. Wenn die animation-duration 1s beträgt, bedeutet das, dass das Scrollen über die gesamte Länge der Seite einer Iteration der Animation entspricht.

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, die animation-duration auf 0.5s zu ändern. Das ermöglicht zwei vollständige Animationszyklen beim Herunterscrollen der Seite durch die animation-delay-Berechnung.

Scott merkte in seiner ursprünglichen Demo an, dass auch das Festlegen von …

animation-iteration-count: 1;
animation-fill-mode: both;

… einige Merkwürdigkeiten beim „Overshoot“ (Überschießen) berücksichtigte, und ich kann bestätigen, dass ich das auch gesehen habe, besonders bei kurzen Viewports. Es lohnt sich also, diese ebenfalls zu setzen.

Scott hat die scrollbezogenen Animations-Eigenschaften auch direkt im :root {} gesetzt, was bedeutet, dass er alle Animationen auf der Seite gleichzeitig steuern konnte. Hier ist seine Demo, die drei Animationen simultan steuert.

© .