diff --git a/parfum-shop/package-lock.json b/parfum-shop/package-lock.json index 8bbcbe5..e82d816 100644 --- a/parfum-shop/package-lock.json +++ b/parfum-shop/package-lock.json @@ -8,6 +8,7 @@ "name": "parfum-shop", "version": "0.0.0", "dependencies": { + "gsap": "^3.14.2", "react": "^19.2.4", "react-dom": "^19.2.4" }, @@ -57,6 +58,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -847,6 +849,7 @@ "integrity": "sha512-q9pE8+47bQNHb5eWVcE6oXppA+JTSwvnrhH53m0ZuHuK5MLvwsLoWrWzBTFQqQ06BVxz1gp0HblLsch8o6pvZw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "picomatch": "^4.0.3" }, @@ -910,6 +913,7 @@ "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -956,6 +960,7 @@ "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1019,6 +1024,7 @@ "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/types": "^7.26.0" } @@ -1074,6 +1080,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -1263,6 +1270,7 @@ "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -1582,6 +1590,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/gsap": { + "version": "3.14.2", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz", + "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==", + "license": "Standard 'no charge' license: https://gsap.com/standard-license." + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -2271,6 +2285,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2303,6 +2318,7 @@ "integrity": "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@oxc-project/types": "=0.120.0", "@rolldown/pluginutils": "1.0.0-rc.10" @@ -2498,6 +2514,7 @@ "integrity": "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.3", @@ -2622,6 +2639,7 @@ "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/parfum-shop/package.json b/parfum-shop/package.json index 1ec969b..70e395e 100644 --- a/parfum-shop/package.json +++ b/parfum-shop/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "gsap": "^3.14.2", "react": "^19.2.4", "react-dom": "^19.2.4" }, diff --git a/parfum-shop/public/blasse-seide-hover.webm b/parfum-shop/public/blasse-seide-hover.webm new file mode 100644 index 0000000..50c41ae Binary files /dev/null and b/parfum-shop/public/blasse-seide-hover.webm differ diff --git a/parfum-shop/public/kalter-beton-hover.webm b/parfum-shop/public/kalter-beton-hover.webm new file mode 100644 index 0000000..77b195a Binary files /dev/null and b/parfum-shop/public/kalter-beton-hover.webm differ diff --git a/parfum-shop/public/kalter-beton-product.png b/parfum-shop/public/kalter-beton-product.png new file mode 100644 index 0000000..e19709e Binary files /dev/null and b/parfum-shop/public/kalter-beton-product.png differ diff --git a/parfum-shop/public/nasser-marmor-hover.webm b/parfum-shop/public/nasser-marmor-hover.webm new file mode 100644 index 0000000..ae6e876 Binary files /dev/null and b/parfum-shop/public/nasser-marmor-hover.webm differ diff --git a/parfum-shop/public/schwarzes-benzin-hover.webm b/parfum-shop/public/schwarzes-benzin-hover.webm new file mode 100644 index 0000000..6a80e6c Binary files /dev/null and b/parfum-shop/public/schwarzes-benzin-hover.webm differ diff --git a/parfum-shop/public/verbranntes-chrom-hover.webm b/parfum-shop/public/verbranntes-chrom-hover.webm new file mode 100644 index 0000000..423dab1 Binary files /dev/null and b/parfum-shop/public/verbranntes-chrom-hover.webm differ diff --git a/parfum-shop/public/weisse-asche-hover.webm b/parfum-shop/public/weisse-asche-hover.webm new file mode 100644 index 0000000..3d5cbe7 Binary files /dev/null and b/parfum-shop/public/weisse-asche-hover.webm differ diff --git a/parfum-shop/src/App.css b/parfum-shop/src/App.css index d2248cd..9d108a7 100644 --- a/parfum-shop/src/App.css +++ b/parfum-shop/src/App.css @@ -22,7 +22,9 @@ .hero { position: relative; min-height: 720px; - margin: 20px; + margin-left: 20px; + margin-right: 20px; + margin-top: 0px; border-radius: 0 0 18px 18px; overflow: hidden; background-image: url("/HERO.jpeg"); @@ -165,6 +167,9 @@ } .product-card { + position: relative; + isolation: isolate; + overflow: hidden; background: #f5f5f5; border: 1px solid #d9d9d9; border-radius: 18px; @@ -173,23 +178,54 @@ display: flex; flex-direction: column; justify-content: space-between; - transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; - cursor: pointer; } -.product-card:hover { - transform: translateY(-6px); - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); - border-color: #bbbbbb; +.product-card:focus-visible { + outline: 2px solid #ff6a00; + outline-offset: 3px; } -.product-card:active { - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - border-color: #ff6a00; +.product-hover-fill { + position: absolute; + inset: 0; + z-index: 2; + pointer-events: none; +} + +.product-hover-image, +.product-hover-video { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + z-index: 0; +} + +.product-hover-image { + background-size: cover; + background-position: center; +} + +.product-hover-video { + display: block; + object-fit: cover; +} + +.product-hover-fill::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.08), + rgba(0, 0, 0, 0.18) + ); } .product-top { + position: relative; + z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; @@ -210,6 +246,8 @@ } .product-image-wrap { + position: relative; + z-index: 1; display: flex; justify-content: center; align-items: center; @@ -220,7 +258,9 @@ } .product-image { - width: 100%; /* Angepasst auf Card */ + position: relative; + z-index: 1; + width: 100%; max-width: 600px; height: auto; object-fit: contain; @@ -233,6 +273,8 @@ } .product-bottom { + position: relative; + z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; @@ -253,7 +295,24 @@ line-height: 1; } -/* --------------------------------------------------- */ +.product-id, +.product-top h3, +.product-bottom p, +.arrow { + transition: color 0.25s ease; +} + +.product-card:hover .product-id, +.product-card:hover .product-top h3, +.product-card:hover .product-bottom p, +.product-card:hover .arrow, +.product-card:focus-within .product-id, +.product-card:focus-within .product-top h3, +.product-card:focus-within .product-bottom p, +.product-card:focus-within .arrow { + color: #fff; + mix-blend-mode: difference; +} /* DISCOVERY */ .discovery-section { @@ -374,5 +433,3 @@ } - -/* --------------------------------------------------- */ \ No newline at end of file diff --git a/parfum-shop/src/App.jsx b/parfum-shop/src/App.jsx index b48e47b..c5572bf 100644 --- a/parfum-shop/src/App.jsx +++ b/parfum-shop/src/App.jsx @@ -1,3 +1,5 @@ +import { useEffect, useRef } from "react"; +import { gsap } from "gsap"; import "./App.css"; // Hallo im Code, @@ -20,7 +22,9 @@ const perfumes = [ id: "01", name: "KALTER BETON", image: - "/KALTER BETON.png", + "/kalter-beton-product.png", + fillImage: "/platzhalter.png", + fillVideo: "/kalter-beton-hover.webm", text: "Mineralisch. Roh. Unberührt.", }, { @@ -28,6 +32,8 @@ const perfumes = [ name: "NASSER MARMOR", image: "/NASSER MARMOR.png", + fillImage: "/platzhalter.png", + fillVideo: "/nasser-marmor-hover.webm", text: "Kühl. Glatt. Sinnlich.", }, { @@ -35,6 +41,8 @@ const perfumes = [ name: "BLASSE SEIDE", image: "/BLASSE SEIDE.png", + fillImage: "/platzhalter.png", + fillVideo: "/blasse-seide-hover.webm", text: "Blass. Sanft. Kostbar.", }, { @@ -42,6 +50,8 @@ const perfumes = [ name: "WEISSE ASCHE", image: "/WEISSE ASCHE.png", + fillImage: "/platzhalter.png", + fillVideo: "/weisse-asche-hover.webm", text: "Still. Staubig. Erhaben.", }, { @@ -49,6 +59,8 @@ const perfumes = [ name: "VERBRANNTES CHROM", image: "/VERBRANNTES CHROM.png", + fillImage: "/platzhalter.png", + fillVideo: "/verbranntes-chrom-hover.webm", text: "Metallisch. Verzehrt. Edel.", }, { @@ -56,11 +68,157 @@ const perfumes = [ name: "SCHWARZES BENZIN", image: "/SCHWARZES BENZIN.png", + fillImage: "/platzhalter.png", + fillVideo: "/schwarzes-benzin-hover.webm", text: "Dunkel. Glänzend. Verboten.", }, ]; function App() { + const cardRefs = useRef([]); + + useEffect(() => { + const cards = cardRefs.current.filter(Boolean); + const cardStates = cards + .map((card) => { + const hoverFill = card.querySelector(".product-hover-fill"); + const hoverVideo = card.querySelector(".product-hover-video"); + const productImage = card.querySelector(".product-image"); + const arrow = card.querySelector(".arrow"); + + if (!hoverFill || !productImage || !arrow) { + return null; + } + + gsap.set(hoverFill, { autoAlpha: 0, scale: 1.08 }); + gsap.set(productImage, { autoAlpha: 1, scale: 1 }); + gsap.set(arrow, { x: 0 }); + + return { card, hoverFill, hoverVideo, productImage, arrow }; + }) + .filter(Boolean); + + const stopVideo = (video) => { + if (!video) { + return; + } + + video.pause(); + try { + video.currentTime = 0; + } catch { + // Ignore if browser blocks random access while buffering. + } + }; + + const playVideo = (video) => { + if (!video) { + return; + } + + try { + video.currentTime = 0; + } catch { + // Ignore if browser blocks random access while buffering. + } + + const playAttempt = video.play(); + if (playAttempt && typeof playAttempt.catch === "function") { + playAttempt.catch(() => {}); + } + }; + + const deactivate = (state) => { + gsap.killTweensOf([state.hoverFill, state.productImage, state.arrow]); + stopVideo(state.hoverVideo); + + gsap.to(state.hoverFill, { + autoAlpha: 0, + scale: 1.08, + duration: 0.35, + ease: "power2.out", + overwrite: "auto", + }); + gsap.to(state.productImage, { + scale: 1, + autoAlpha: 1, + duration: 0.35, + ease: "power2.out", + overwrite: "auto", + }); + gsap.to(state.arrow, { + x: 0, + duration: 0.35, + ease: "power2.out", + overwrite: "auto", + }); + }; + + const activate = (state) => { + cardStates.forEach((item) => { + if (item !== state) { + deactivate(item); + } + }); + + gsap.killTweensOf([state.hoverFill, state.productImage, state.arrow]); + playVideo(state.hoverVideo); + + gsap.to(state.hoverFill, { + autoAlpha: 1, + scale: 1, + duration: 0.45, + ease: "power2.out", + overwrite: "auto", + }); + gsap.to(state.productImage, { + scale: 0.92, + autoAlpha: 0.35, + duration: 0.45, + ease: "power2.out", + overwrite: "auto", + }); + gsap.to(state.arrow, { + x: 8, + duration: 0.45, + ease: "power2.out", + overwrite: "auto", + }); + }; + + const cardCleanups = cardStates.map((state) => { + const onEnter = () => activate(state); + const onLeave = () => deactivate(state); + + state.card.addEventListener("pointerenter", onEnter); + state.card.addEventListener("pointerleave", onLeave); + + return () => { + state.card.removeEventListener("pointerenter", onEnter); + state.card.removeEventListener("pointerleave", onLeave); + }; + }); + + const resetAll = () => { + cardStates.forEach((state) => deactivate(state)); + }; + + const onMouseOutWindow = (event) => { + if (!event.relatedTarget) { + resetAll(); + } + }; + + window.addEventListener("blur", resetAll); + document.addEventListener("mouseout", onMouseOutWindow); + + return () => { + window.removeEventListener("blur", resetAll); + document.removeEventListener("mouseout", onMouseOutWindow); + cardCleanups.forEach((cleanup) => cleanup()); + }; + }, []); + return (
{/* Hero */} @@ -118,8 +276,32 @@ function App() {
- {perfumes.map((item) => ( -
+ {perfumes.map((item, index) => ( +
{ + cardRefs.current[index] = el; + }} + > +