Bild Guckloch Effekt der Maus verfolgt – Webdesign CSS Mask Tutorial
Ich war auf der Suche nach einer Lösung, um einen Kreis als Guckloch über ein Bild bewegen zu lassen, so dass das drunterliegende Bild sichtbar wird. Der Kreis bewegt sich on Mouse Movement – verfolgt also magnetisch den Mauszeiger.
Da man in Webflow Animation keine Position top / left oder CSS Masken beeinflussen kann, muss ein wenig custom Code hinzugefügt werden. Dafür habe ich folgenden externen Code verwendet: https://stackoverflow.com/questions/6....
► Effekt Vorschau:
https://webflow-lernen.webflow.io/pee...
► Direkt im Webflow Designer öffnen:
https://preview.webflow.com/preview/w...
Ein weiterer nützlicher Artikel von CSS-Tricks zum Thema Mask-Position hat mir geholfen das ganze zu verstehen:
https://css-tricks.com/almanac/proper...
Der Effekt ist ähnlich wie auf der Seite von Vanmoof: https://www.vanmoof.com/de-DE/s3?colo... oder auf https://www.canoo.com/canoo
---------------------------------------------
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
---------------------------------------------
#webdesign #websiteanimation #webflow
—
► Unterstütze meinen Kanal auf Patreon (mehrere 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
—
Meinen Web & Design Podcast abonnieren:
► 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