Erstellen einer Sticky-on-Scroll-Animation in Webflow - Einsteiger-Tutorial

Erstellen einer Sticky-on-Scroll-Animation

Als freiberuflicher Entwickler stoße ich oft auf Designherausforderungen, bei denen ich kreativ denken muss. Kürzlich wurde ich damit beauftragt, eine Sticky-On-Scroll-Animation für die Website eines Kunden zu erstellen. In diesem Blogbeitrag erkläre ich die Schritte, die ich unternommen habe, um diesen Effekt zu erzeugen, und stelle den nötigen Code zur Verfügung, um ihn auf deiner eigenen Website nachzubauen.

Also lass uns lernen, wie man mit Webflow eine Sticky on Scroll Animation erstellt. Du wirst Folgendes lernen:

👉 Webflow Shortcuts
👉 Sticky Elements
👉 Scroll-Animationen in Webflow

Tipp: Um ein Sticky Element zu erstellen, darfst du das übergeordnete Element nicht auf "Overflow Hidden" setzen!
Das war für mich immer etwas verwirrend, aber deshalb verwende ich immer mehr Divs, um zu helfen.

Bereite den klebrigen Abschnitt vor

Wir werden einen zweispaltigen Abschnitt erstellen, damit eine Spalte gescrollt werden kann, während die andere Spalte kleben bleibt.
Das ist sehr nützlich, wenn du etwas hervorheben, einen Überblick geben oder vielleicht ein Bild zeigen willst, während der Benutzer durch den Text scrollen kann.

Um eine Sticky-On-Scroll-Animation zu erstellen, musst du zunächst die HTML-Struktur einrichten. Sobald die Struktur steht, kannst du CSS und JavaScript verwenden, um das gewünschte Layout und die Animationseffekte zu erstellen ODER du machst es mit Webflow :)

In meinem Fall habe ich Webflow und einen Raster-Wrapper für den Seiten-Wrapper verwendet, um die Elemente auf der Seite anzuordnen, und dann habe ich einen Wrapper hinzugefügt und Bilder darin platziert. Ich habe die Bilder mit CSS gestylt, um einen Stack-Effekt zu erzeugen, und dann Webflows Interaction Trigger verwendet, um die Scrollposition des Nutzers zu verfolgen und eine Sticky-Klasse auf den Wrapper anzuwenden, wenn der Nutzer über einen bestimmten Punkt hinaus scrollt. Dies bewirkt, dass der Wrapper und sein Inhalt am oberen Rand des Bildschirms haften bleiben, während der Rest der Seite weiter scrollt.

Es ist ein wirklich einfach zu erstellender Abschnitt, der einen großen Einfluss auf die UX hat - sowohl positiv als auch negativ. Übertreibe es also nicht mit den Sticky Sections in Webflow und behalte bei der Erstellung deiner Websites immer den Nutzer im Auge.

Um eine Sticky-On-Scroll-Animation zu erstellen, brauchst du eine Kombination aus HTML, CSS und JavaScript, wenn du es von Grund auf machst. Wenn du die in diesem Video beschriebenen Schritte befolgst, kannst du einen ähnlichen Effekt für deine eigene Website nur mit Webflow erstellen.

Wenn du es noch nicht getan hast, solltest du meinen Newsletter abonnieren, um hochwertige Inhalte direkt in deinen Posteingang zu bekommen. Außerdem erhältst du 15 kostenlose Cloneables für Webflow, die du kopieren und in dein nächstes Projekt einfügen kannst!


⏲️ Timestamps
00:00 - Intro
00:22 - Überblick
00:48 - Seitenstruktur einrichten
10:27 - Scroll-Animation erstellen
17:39 - Ergebnis