Navigation ab einem bestimmten Punkt verkleinern (mit Vorlage)

Level: Einfach
Scroll-Animation
Vorschaubild zum Beitrag: Navigation ab einem bestimmten Punkt verkleinern (mit Vorlage)
ressourcen
Free Cloneable
Live Vorschau
* AFFILIATE LINK
Details
Level
Einfach
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

Lukas zeigt uns in diesem Tutorial, wie er in Webflow eine Navigation ab einem bestimmten Punkt während des Scrollens verkleinert. In diesem Fall sobald die nächste Sektion bei der Navigation ankommt. Außerdem ändert sich noch das Design der Navigation von dunkel zu hell. Dafür wird kein Custom Code benötigt. Es ist alles direkt mit den Webflow Interaktionen gelöst.Kostenlose Vorlage und Webflow Cloneable gibt es in meinem Showcase.

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