3D-Effekte in Scroll-Animationen: So machst du deine Website noch interessanter

Level: Profi

Scroll-Animation

ressourcen

* AFFILIATE LINK

Details

Level

Profi

Datum

August 19, 2026

Autor

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

Jonas Arleth

Blog Post

Part 4: Passend zu der Page Load Animation, die wir im letzten Tutorial erstellt haben, gibts heute eine Scroll Animation mit 3D Effekt, die direkt daran anknüpft. Dabei animieren wir die Inhalte der Bühne der Homepage, die für eine Weile sticky mit scrollt. Folge meiner Schritt für Schritt Anleitung und lerne, wie du deine Website mit diesen speziellen Interaktionen aufwerten kannst.

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

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

Kategorie

Scroll-Animation

Skill

Fortgeschritten

Vorschaubild zum Beitrag: Fancy Schriftzug Scroll-Animation

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