Scroll-Linked Animations

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Sie scrollen nach unten bis zu einem bestimmten Punkt, und dann möchten Sie Dinge auf eine bestimmte Weise gestalten. Eine Kopfzeile wird fixiert. Eine Animation wird ausgelöst. Ein Inhaltsverzeichnis erscheint. Um irgendetwas basierend auf der Scroll-Position zu tun, ist derzeit JavaScript erforderlich. Sie beobachten die Scroll-Position über ein DOM-Ereignis und ändern die Gestaltung eines Elements basierend auf dieser Position. Oder, wahrscheinlich besser, wenn Sie können, verwenden Sie IntersectionObserver. Wir haben gerade über all das geschrieben.

Jetzt gibt es eine neue (inoffizielle) Spezifikation, die versucht, diese Möglichkeiten auf CSS zu bringen. Ich liebe es, wenn Webstandards beteiligt sind, weil sie sehen, wie Autoren wie wir bestimmte Designeffekte versuchen umzusetzen, und (vermutlich) wollen, dass es einfacher und performanter wird. Ich mag auch, wie diese Spezifikation Editoren von Mozilla, *und* Google *und* Apple auflistet.

Ich frage mich, wie sie das unendliche Schleifen-Zeug hier handhaben werden. Wie Sie zu einem Punkt scrollen, es löst eine Animation aus, die ein Element so bewegt, dass sie die Scroll-Position verändert, was die Animation stoppt, was wieder die Scroll-Position bewegt ... usw. Ich frage mich auch, warum das alles auf Animationen beschränkt ist. "Scroll-Positions-Gestaltung" scheint die größte Anziehungskraft und den größten Nutzen zu haben.

Direkter Link →