SVG Linie beim Scrollen durch Website animieren
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- Heute zeige ich dir eine Möglichkeit, wie du den Pfad einer gezeichnete SVG Linie während des Scrollens durch die Website „malen” bzw. animieren kannst. Über mein Patreon Account habe ich den kompletten One-Pager Layout Prozess in Webflow als Video dokumentiert: / 74222598 .
Ergebnis anschauen:
guest-house-on...
Kostenloses Webflow Cloneable:
webflow.grsm.i... *
Außerdem habe ich diese einfachen Scroll-Animationen, eingesetzt:
• Webflow Websites mit d...
---------------------------------------------
Meine Onlinekurse:
👉 Webflow Onlinekurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
formburg.com/kurs
👉 50+ Webflow-Tricks:
www.formburg.c...
👉 Webdesign Angebote mit drei Preisoptionen erstellen:
www.jonasarlet...
---------------------------------------------
Kostenlosen Webflow Account anlegen:
formburg.com/w... *
Webflow schnell und einfach lernen:
formburg.com/t...
---------------------------------------------
// TIMESTAMPS
00:00 - Intro
01:07 - Linie im Layout Programm zeichnen
02:55 - Grundaufbau in Webflow
06:16 - Grundproblem
07:19 - Lösung 1: Lazy Loading bei allen Bildern deaktivieren
07:35 - Lösung 2: Der Linie eine feste Höhe geben
09:38 - Lösung 3: Bei den Bildern mit Aspect Ratio arbeiten
00:00 - Ergebnis
#webflow #websitedesign #webdesign
---------------------------------------------
// PATREON
► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): bit.ly/patreon-...
----------------------------------------------
// MEIN WEBDESIGN UND FREELANCER BLOG
► jonasarleth.co...
----------------------------------------------
// SOCIAL MEDIA
► Instagram: / jonasarleth
► Dribbble: dribbble.com/j...
► LinkedIn: / jonasarleth
----------------------------------------------
// MEIN WEB & DESIGN PODCAST
► iTunes: jonasarleth.co...
► Spotify: jonasarleth.co...
► Pocket Casts: jonasarleth.co...
► SoundCloud: jonasarleth.co...
► Overcast: jonasarleth.co...
► Stitcher: jonasarleth.co...
----------------------------------------------
* Affiliate Links
This is great! Thank you for the video you shared with us!
I'm wondering why I can't scroll through this page on a mobile device?
Why not? You can do that!
When I clone this and try scroll on android i can't scroll. Only for this page, for another is everything ok.
Kaffee von mir ☕️😉
Vielen Dank für deinen Content.
Milan, du wirst für immer der erste hier auf TH-cam sein, der mir ein Kaffee spendiert hat. Ich wusste nicht, dass das auch in den Kommentaren geht. Mega!
@@jonasarleth Das ist natürlich eine Ehre für mich. 😊 Ich wusste auch nicht, dass es in den Kommentaren stehen würde. Ja, ich würde auch gerne mit dir persönlich einen Kaffee trinken, aber ich denke, das wird noch dauern. Also bis dahin, erstmal virtuell. 😉👋
Thanks for making it, it is a great idea.
You're welcome!
Hi is there online courses available?
Yes but only in German: webflow-lernen.de
Hey Jonas! Sehr produktives Video. Woher nimmst du dir eigentlich die ganzen Bilder? Sowas wie unsplash usw. findet man meist keine passenden Bilder. Würde mich auf eine Antwort freuen.
Doch, ich bediene mich immer an Unsplash. Man muss eben ein gutes Auge haben 😉
Danke dir vielmals :) liebe Grüße Bryan
Sehr gerne! Falls du ein Tutorial-Wunsch hast, gerne her damit!
super, gut gemacht profi
Danke!
hey Jonas... super video ich habe die animation gerade ausprobiert, aber bei mir wird das SVG leider nicht animiert. ich weiß wirklich nicht woran es liegt, ich habe alles genauso gemacht wie im video
Die Animation ist bei mir nur ganz am Ende zu sehen
@@amelies587 Ok aber gut zu wissen, dass sie schon mal animiert. Es kann gut sein, dass du eine andere Linienform hast und entsprechend den Startpunkt versetzen musst. Das SVG Embed (line-drawing) hat bei mir ja einen Abstand nach oben bei Position absolute. Spiel mal damit rum bis du sie konstant animiert siehst. Vielleicht setzt du das auch erstmal auf 50vh und dann müsste sie genau in der Mitte gemalt werden.
@@jonasarleth Danke erstmal für den Tipp.. Die Linie animiert einfach super langsam. Ich möchte das SVG mitten auf einer Seite nur in einer bestimmten Section benutzen. Wenn ich es auf einer anderen Blanko Seite ausprobiere dann funktioniert es. Sobald ich alles rüberkopiere klappt es nicht mehr.. Kann das an den anderen Sections liegen und wenn ja wie könnte ich das ganze fixen?
Sehr cool ! Vielen Dank Jonas !
Sehr gerne!