Eine Website Feature Sektion mit Parallax Scroll Effekt bauen

Level: Fortgeschritten

Scroll-Animation

ressourcen

* AFFILIATE LINK

Details

Level

Fortgeschritten

Datum

July 12, 2026

Autor

Jonas Arleth

Blog Post

Part 5: In diesem Teil gehts weiter mit einer Art Feature Sektion, die gleichzeitig als Galerie funktioniert. Jeder Bereich füllt immer zu 100% das Browserfenster aus und bietet optional Platz für einen Copytext um ein besonderes Merkmal oder ein Highlight zu beschreiben. Um die Bereiche aufzupeppen, habe ich bei jeder Sektion einen Parallax Scroll Effekt mit eingebaut. Der Aufbau lässt sich auch wunderbar an das Webflow CMS anbinden wodurch der Kunde dann weitere Bereiche und Beschreibungen hinzufügen könnte.

Hier mehr über den Sion erfahren
Hier gehts zur YouTube Playlist mit allen Videos zu diesem Projekt
Responsive Design Bonusinhalte über meinen Patreon Account bekommen

Mehr Content

Portfolio Grid mit Teaser Animation in Webflow erstellen

Wir bauen zusammen eine dezente Scroll-Into-View Animation, welche Teaser Bilder rein animiert, sobald sie in den sichtbaren Bereich des Seitenbesuchers kommen.

Video

Kategorie

Scroll-Animation

Skill

Einfach

Portfolio Bilder Collage Scroll Animation

Lerne wie du eine Collage aus vielen Bildern während des scrollens ran oder raus zoomen kannst. Das Ganze nutze ich ganz oben in einer meiner Portfolio Case Studies.

Video

Kategorie

Scroll-Animation

Skill

Einfach

Portfolio Aufbau: Sticky Projekt-Teaser Scroll Animation in Webflow

Ein Splitscreen-Design passend für dein Portfolio, bei dem links die Texte durch scrollen und rechts die Projektbilder sticky immer im Viewport bleiben und sich je nach Projekt-Teaser und Scroll-Position austauschen.

Video

Kategorie

Scroll-Animation

Skill

Fortgeschritten

Header in Webflow später rein animieren

Blende deinen Header bzw. deine Navigation aus und ein abhängig davon, bei welchem Bereich der Seitenbesucher gerade scrollt.

Video

Kategorie

Scroll-Animation

Skill

Fortgeschritten

Hintergrundfarbe beim Scrollen ändern – Scroll-Animation

Schau dir an wie du während des Scrollens auf einer Website die Hintergrundfarbe einer Section änderst bzw. mit einem fade-in / fade-out Effekt ein und ausblendest.

Video

Kategorie

Scroll-Animation

Skill

Fortgeschritten

Fancy Schriftzug Scroll-Animation – Webflow Tutorial

Lerne wie du in wenigen Schritten einen Schriftzug oder eine ganze Headline an das Scrolling anbinden kannst, um die einzelnen Buchstaben während dem scrollen zu animieren

Video

Kategorie

Scroll-Animation

Skill

Einfach