Portfolio Aufbau: Sticky Projekt-Teaser Scroll Animation in Webflow
Level:
Fortgeschritten 👍
Ergebnis anschauen
https://sticky-teaser-image-scroll-animation.webflow.io
Im Webflow Designer öffnen und klonen
https://webflow.com/website/Sticky-Project-Teaser-Image-Scroll-Animation
Im Webflow Designer öffnen und klonen
https://webflow.grsm.io/Sticky-Project-Teaser-Image-Scroll-Animation
Affiliate Link
Ein weiteres Layout, welches du in deinem Portfolio als Projektübersicht einsetzen könntest. Wir bauen zusammen in Webflow ein Splitscreen-Design, bei dem links die Texte durch scrollen und rechts die Projektbilder parallel dazu sticky immer im Viewport bleiben und sich je nach Projekt-Teaser und Scroll-Position austauschen.
Die Scroll Animation dazu legen wir direkt in Webflow an. Denk dran, dass du die Interaktion anpassen musst, sobald mehr Teaser hinzukommen!
Kapitel:
00:00 – Intro
01:17 – Aufbau in Webflow
06:27 – Scroll Interaktion anlegen
09:07 – Ergebnis