Coole Website Page Load Animation mit 3D Effekt bauen – SION Part 3
In Teil 3 beschäftigen wir uns mit der Seiten-Lade-Animation (Page Load Interaktion), bei der wir die Sonne und den Schriftzug „SaveSion” vergrößert zentriert darstellen und dann an den eigentlichen Platz im Header zurück animieren (eine Art Preloader). Das gibt eine kurze und gute Aufmerksamkeit auf das eigentliche Thema und den Grund der Kampagne. Gleichzeitig dreht sich das Auto, sowie die Wand im Hintergrund leicht mit einem 3D Rotate Effekt rein. Es soll eine Art Bühne darstellen, die gedreht wird. im nächsten Part bauen wir dann die Scroll Animation, die direkt nach dem laden der Seite folgt.
Hier gehts zur YouTube Playlist mit allen Videos zu diesem Projekt:
• Sono Motors SION Marketing Landingpage
Responsive Design Prozess auf meinem Patreon Account verfolgen:
/ 77302808
Mehr über den Sion erfahren:
https://sonomotors.com
Ergebnis anschauen:
https://sion-car.webflow.io
Im Webflow Designer öffnen und klonen (Template):
https://webflow.grsm.io/sion-landingpage * (affiliate Link)
---------------------------------------------
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:12 – Header Position Sticky einstellen
02:44 – Planung SaveSion Schriftzug Animation
04:55 – Page Load Animation Sonne und Schriftzug
07:51 – Page Overlay einbauen
17:35 – Wand – 3D Rotate Page Load Animation
19:25 – Auto – 3D Rotate Page Load Animation
24:44 – Ergebnis
#webflow #savesion #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