diff --git a/parfum-shop/package-lock.json b/parfum-shop/package-lock.json index 8bbcbe5..723d547 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" }, @@ -1582,6 +1583,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", 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 ac4291c..8ad40df 100644 --- a/parfum-shop/src/App.css +++ b/parfum-shop/src/App.css @@ -8,7 +8,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"); @@ -143,6 +145,9 @@ } .product-card { + position: relative; + isolation: isolate; + overflow: hidden; background: #f5f5f5; border: 1px solid #d9d9d9; border-radius: 18px; @@ -153,7 +158,52 @@ justify-content: space-between; } +.product-card:focus-visible { + outline: 2px solid #ff6a00; + outline-offset: 3px; +} + +.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; @@ -174,6 +224,8 @@ } .product-image-wrap { + position: relative; + z-index: 1; display: flex; justify-content: center; align-items: center; @@ -184,6 +236,8 @@ } .product-image { + position: relative; + z-index: 1; width: 100%; max-width: 600px; height: auto; @@ -192,6 +246,8 @@ } .product-bottom { + position: relative; + z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; @@ -212,6 +268,25 @@ 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 { display: grid; @@ -326,4 +401,4 @@ .product-card { min-height: 320px; } -} \ No newline at end of file +} diff --git a/parfum-shop/src/App.jsx b/parfum-shop/src/App.jsx index 55b0b27..0910504 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"; const perfumes = [ @@ -5,7 +7,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.", }, { @@ -13,6 +17,8 @@ const perfumes = [ name: "NASSER MARMOR", image: "/NASSER MARMOR.png", + fillImage: "/platzhalter.png", + fillVideo: "/nasser-marmor-hover.webm", text: "Kühl. Glatt. Sinnlich.", }, { @@ -20,6 +26,8 @@ const perfumes = [ name: "BLASSE SEIDE", image: "/BLASSE SEIDE.png", + fillImage: "/platzhalter.png", + fillVideo: "/blasse-seide-hover.webm", text: "Blass. Sanft. Kostbar.", }, { @@ -27,6 +35,8 @@ const perfumes = [ name: "WEISSE ASCHE", image: "/WEISSE ASCHE.png", + fillImage: "/platzhalter.png", + fillVideo: "/weisse-asche-hover.webm", text: "Still. Staubig. Erhaben.", }, { @@ -34,6 +44,8 @@ const perfumes = [ name: "VERBRANNTES CHROM", image: "/VERBRANNTES CHROM.png", + fillImage: "/platzhalter.png", + fillVideo: "/verbranntes-chrom-hover.webm", text: "Metallisch. Verzehrt. Edel.", }, { @@ -41,11 +53,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 (
@@ -99,8 +257,32 @@ function App() {
- {perfumes.map((item) => ( -
+ {perfumes.map((item, index) => ( +
{ + cardRefs.current[index] = el; + }} + > +