Animation

Bild Guckloch Effekt: CSS Maskierung in Webflow nutzen

Level:
Profi 💪
Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.
Cookies akzeptieren und Medien laden

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/63227926/move-clip-path-position-to-mouse-cursor.

Ein weiterer nützlicher Artikel von CSS-Tricks zum Thema Mask-Position hat mir geholfen das ganze zu verstehen:
https://css-tricks.com/almanac/properties/m/mask-position

Der Effekt ist ähnlich wie auf der Seite von Vanmoof:
https://www.vanmoof.com/de-DE/s3?color=dark
oder auf https://www.canoo.com/canoo

Ergebnis anschauen
Icon für einen externen Link
Projekt im Webflow Designer öffnen
Icon für einen externen Link