It’s #FrontendFriday – Scroll Interactions
Hallo #FrontendFriday-Leser/in, heute schauen wir uns an, wie man Scroll Interactions umsetzen kann.
Was meinst du?
Um zu schauen was ich meine, besucht gerne scrollmagic.io und benutzt euer Mausrad um nach unten zu scrollen. Wie ihr seht, spielt ihr durch eurer scrollen Animationen ab. Genau darum soll es heute gehen.
Wie mach ich das?
Generell ist die Idee die aktuelle Scrollposition zu beobachten und mit ihr den Zustand der Seite zu ändern / mit ihr zu interagieren. Dies kann man manuell per JavaScript machen (addEventListener(’scroll‘, (event) =>…) und darin die aktuelle Position auslesen und z.B. die Hintergrundfarbe ändern. Wie so oft gibt es aber auch libraries, die für uns schon vieles übernehmen.
Mit der library scrollmagic kann man hierzu eine Scrollhöhe als „Start“ und „Stop“ zu definieren und diese mit einem „Trigger“ auslösen. Zudem auch die Art der Animation. Scrollt der Nutzer über den „Start“, so startet die Animation. Um sich die genauen Stellen (zur Entwicklung) zu visualisieren, hat scrollmagic eine Optionen diese sichtbar zu machen. Als Beispiel kann man sich scrollmagic.io – image_sequence anschauen (oder auch die weiteren Beispiele). Hier werden am rechten Bildschirmrand die Bereiche angezeigt.
Beispiele
Bei denen diese Art der Interaktion eingesetzt wird (keine Werbung für die Produkte):
(Stand 12.08.22 haben diese Scroll Interactions eingesetzt. Zu einem späteren Zeitpunkt kann es sein, dass diese nicht mehr verwendet werden.)
FazitDa der Nutzende durch sein scrollen die Animation steuert, ist es eine gute Option eine Seite interaktiver zu gestalten. Je nach Fall kann man diese Animationen mehr oder weniger einsetzen. Allerdings sollte man auch auf die Datenmenge achten, die man durch Animationen verursacht. Zum Beispiel bei Animationen mit Bildern, müssen alle Einzelbilder heruntergeladen werden. Dies kann schnell zu einigen MB führen, die heruntergeladen werden müssen. Für mobile Geräte sollte man hier evtl. eine Alternative Darstellung vorsehen.
