Eine Website Feature Sektion mit Parallax Scroll Effekt bauen

Level: Fortgeschritten
Scroll-Animation
Vorschaubild zum Beitrag: Eine Website Feature Sektion mit Parallax Scroll Effekt bauen
ressourcen
Live Vorschau
* AFFILIATE LINK
Details
Level
Fortgeschritten
Datum
August 19, 2026
Autor
Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.
Jonas Arleth
Share
Auf X teilen
Share on LinkedIn
Share on Reddit
Share via email
Share on WhatsApp
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.

Mehr Content

Blog Archiv

I Let Claude Build My Scroll Animation From Figma

Can Claude build a complex GSAP scroll animation from a Figma design? I test it and use DialKit to fine tune timing and easing live in the browser.
Video
​
Skill
Einfach
Kategorie
AI
Anschauen
Beitrag anschauen
Vorschaubild zum Beitrag: Portfolio Grid mit Teaser Animation in Webflow erstellen

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
​
Skill
Einfach
Kategorie
Scroll-Animation
Anschauen
Beitrag anschauen
Vorschaubild zum Beitrag: Portfolio Bilder Collage Scroll Animation

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
​
Skill
Einfach
Kategorie
Scroll-Animation
Anschauen
Beitrag anschauen
Vorschaubild zum Beitrag: Portfolio Aufbau: Sticky Projekt-Teaser Scroll Animation in Webflow

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
​
Skill
Fortgeschritten
Kategorie
Scroll-Animation
Anschauen
Beitrag anschauen
Vorschaubild zum Beitrag: Header in Webflow später rein animieren

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
​
Skill
Fortgeschritten
Kategorie
Scroll-Animation
Anschauen
Beitrag anschauen
Vorschaubild zum Beitrag: Hintergrundfarbe beim Scrollen ändern

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
​
Skill
Fortgeschritten
Kategorie
Scroll-Animation
Anschauen
Beitrag anschauen
Abstrakte orangefarbene Form mit verwaschenen Rändern vor schwarzem Hintergrund.
Kurse
Plattform
Socials
Sprache wechseln
German
English
Cookie Einstellungen
Diese Website wurde komplett in Webflow erstellt.
Mit * gekennzeichnete Links sind Affiliate Links
© 2025 FORMBURG.
Founded BY Jonas Arleth
ImpressumDatenschutzerklärung