Moderne Website Scroll Animation umsetzen (a la Apple)

Level: Fortgeschritten

Scroll-Animation

ressourcen

* AFFILIATE LINK

Details

Level

Fortgeschritten

Datum

July 12, 2026

Autor

Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.

Jonas Arleth

Blog Post

Lerne fortgeschrittene Text und Bild Scroll Animationen wie auf den Apple Produktseiten in Webflow umzusetzen. Verständlich in unter 20 Minuten erklärt. Und zwar bauen wir abschließend für die SION Landingpage was ganz besonderes. Wenn du das Prinzip einmal verstanden hast, kannst du damit wahnsinnig tolle kundenspezifische Interaktionen bauen. Wir animieren während des Scrollens verschiedene Titel Elemente rein, die sich gegenseitig mit einem Fade in/out ablösen. Im Hintergrund bewegt sich gleichzeitig langsam eine Sonne, die am Ende mit einem Bild des Autos verschmilzt.

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