Bewegen Sie die Maus übers Wasser.
Im Vordergrund liegt der alte Kutter — folgen Sie dem Cursor, und darunter erscheint dieselbe Bucht mit einer modernen Yacht.
Vorher / Nachher — direkt unter dem Cursor.
Ein Bild liegt über dem anderen. Statt eines starren Vorher/Nachher-Sliders öffnet der Cursor ein weiches Fenster in die zweite Ebene — genau dort, wo der Betrachter hinsieht.
Der Effekt läuft komplett im Browser über eine CSS-Maske: pro Frame werden nur zwei CSS-Variablen (die Cursorposition) aktualisiert, gedrosselt via requestAnimationFrame — flüssig mit 60 fps und ohne Layout-Neuberechnung.
In drei Schritten zum Reveal.
Derselbe Mechanismus, den der Hero oben zeigt — auf jedes Bildpaar übertragbar.
Cursor bewegen
Der weiche Kreis folgt Maus oder Finger und legt genau dort die zweite Ebene frei, wo der Betrachter hinschaut.
Weiche Kante
Ein radialer Verlauf (Feather) blendet sanft zwischen altem Boot und Yacht — ohne harte Kante.
Verlassen = Reset
Verlässt der Cursor den Bereich, schließt sich das Fenster wieder — Standard ist immer das alte Boot.
So einen Effekt für Ihre Seite?
Ob Vorher/Nachher, Sanierung oder Produktvarianten — wir bauen den Hover-Reveal passend zu Ihren Bildern und Ihrer Marke.