Vertikale Navigation mit Scroll-Balken (Progress Bar)
In diesem Webflow Tutorial bauen wir eine vertikale Sidebar Navigation, die eine Fortschrittsanzeige (progress bar) beinhaltet. Der Balken scrollt mit der Seite mit und zeigt dem Seitenbesucher, wo auf der Seite er sich befindet.
Der Aufbau eignet sich gerade für lange Seiten, die zum Beispiel über eine umfangreiche Scroll-Animation eine Geschichte erzählen und passend dazu auch ein eigenes Design für den Scroll-Balken umsetzen wollen.
Ergebnis anschauen: https://vertical-navbar.webflow.io
Im Webflow Designer öffnen und klonen: https://webflow.grsm.io/vertical-navbar *
---------------------------------------------
Meine Onlinekurse:
👉 Webflow Onlinekurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
https://formburg.com/kurs
👉 50+ Webflow-Tricks:
https://www.formburg.com/tricks
👉 Webdesign Angebote mit drei Preisoptionen erstellen:
https://www.jonasarleth.com/produkt/w...
---------------------------------------------
Kostenlosen Webflow Account anlegen:
https://formburg.com/webflow-kostenlos *
Webflow schnell und einfach lernen:
https://formburg.com/tutorials
---------------------------------------------
// TIMESTAMPS
00:00 – Intro
01:19 – Aufbau Navigation
07:50 – Aufbau Vertikale Menüpunkte
13:28 – Aufbau Progress-Bar
15:00 – Animation Progress-Bar
17:06 – Standard Scroll-Balken im Browser ausblenden
18:24 – Animation Hintergrund CTA
20:40 – Ergebnis
#webflow #websitedesign #webdesign
---------------------------------------------
// PATREON
► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): http://bit.ly/patreon-seite
----------------------------------------------
// MEIN WEBDESIGN UND FREELANCER BLOG
► https://jonasarleth.com/blog
----------------------------------------------
// SOCIAL MEDIA
► Instagram: / jonasarleth
► Dribbble: https://dribbble.com/jonasarleth
► LinkedIn: / jonasarleth
----------------------------------------------
// MEIN WEB & DESIGN PODCAST
► iTunes: https://jonasarleth.com/itunes
► Spotify: https://jonasarleth.com/spotify
► Pocket Casts: https://jonasarleth.com/pocketcasts
► SoundCloud: https://jonasarleth.com/soundcloud
► Overcast: https://jonasarleth.com/overcast
► Stitcher: https://jonasarleth.com/stitcher
----------------------------------------------
Affiliate Links