Portfolio Bilder Collage Scroll Animation

Level: Einfach

Scroll-Animation

Details

Level

Einfach

Datum

July 12, 2026

Autor

Jonas Arleth

Blog Post

Weiter gehts mit dem Ausbau deines Portfolios. Ich zeige dir heute, 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 Case Studies um ein Kunden-Projekt vorzustellen. Gerade der Einstieg soll hier einen Wow-Effekt vermitteln.Ich bin ein großer Fan davon nicht jede Projektseite in meinem Portfolio gleich aussehen zu lassen. Und Webflow ist perfekt dafür geeignet. Du kannst im Handumdrehen beeindruckende Animationen integrieren, die deine Website merklich von anderen Webdesignern unterscheiden. Und das ist es worum es bei deinem Portfolio geht.

‍

Kapitel:

00:00 – Intro

01:10 – Aufbau Collage und Export

02:12 – Aufbau Bühne in Webflow

06:26 – Bild Grundeinstellungen

08:22 – Interaktion anlegen

12:52 – Ergebnis

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