Cooler 3 D Effekt auf dieser Site - wie umsetzen?
bearbeitet von
@@Killua
> immerhin müsste man die Position mit dem Cursor, schon beim Mouseover abfragen, dann wie weiter?
Es sind zwei Bilder: Vorder- und Hintergrund. Die entsprechend der Position des Cursors mit `translate()` (`translate3d()`?) verschieben.
Beim Vordergrundbild sind die Personen freigestellt, d.h. der Rest der Bildfläche ist transparent. JPEG – was ein für Fotos brauchbares Grafikformat ist – unterstützt keine Transparenz. Das Vordergrundbild ist ein PNG – also riesig groß, fast ein halbes Megabyte. Schlecht. Besser: [JPEG mit SVG-ClipPath](https://css-tricks.com/transparent-jpg-svg/).
😷 LLAP
--
*“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon
{:@en}
Cooler 3 D Effekt auf dieser Site - wie umsetzen?
bearbeitet von
@@Killua
> immerhin müsste man die Position mit dem Cursor, schon beim Mouseover abfragen, dann wie weiter?
Es sind zwei Bilder: Vorder- und Hintergrund. Die entsprechend der Position des Cursors die Bilder mit `translate()` (`translate3d()`?) verschieben.
Beim Vordergrundbild sind die Personen freigestellt, d.h. der Rest der Bildfläche ist transparent. JPEG – was ein für Fotos brauchbares Grafikformat ist – unterstützt keine Transparenz. Das Vordergrundbild ist ein PNG – also riesig groß, fast ein halbes Megabyte. Schlecht. Besser: [JPEG mit SVG-ClipPath](https://css-tricks.com/transparent-jpg-svg/).
😷 LLAP
--
*“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon
{:@en}