From 8047ffe034e045dbd0293489fc26ad08c4a3f4bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 21 Mar 2022 11:03:05 +0100 Subject: [PATCH] Isolate Homepage collage component and add hover effect on other photos --- src/components/molecules/PhotoCard.svelte | 14 +- src/components/organisms/Collage.svelte | 24 +++ src/routes/index.svelte | 17 +- src/style/molecules/_photo-card.scss | 3 +- src/style/organisms/_collage.scss | 200 ++++++++++++++++++++++ src/style/pages/_homepage.scss | 193 --------------------- src/style/style.scss | 1 + 7 files changed, 242 insertions(+), 210 deletions(-) create mode 100644 src/components/organisms/Collage.svelte create mode 100644 src/style/organisms/_collage.scss diff --git a/src/components/molecules/PhotoCard.svelte b/src/components/molecules/PhotoCard.svelte index 211640c..1fe29d3 100644 --- a/src/components/molecules/PhotoCard.svelte +++ b/src/components/molecules/PhotoCard.svelte @@ -1,4 +1,5 @@ -
+
sendHover(true)} + on:focus={() => sendHover(true)} + on:mouseout={() => sendHover(false)} + on:blur={() => sendHover(false)} +> {#if url} + import PhotoCard from '$components/molecules/PhotoCard.svelte' + + export let photos: any[] = [] + + let hovered: number = null + + +{#if photos} +
+ {#each photos as { slug, title, image, location, city }, index} + hovered = detail ? index : null} + /> + {/each} +
+{/if} \ No newline at end of file diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 77d3ea9..d36eb8a 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -15,8 +15,8 @@ import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte' import BoxCTA from '$components/atoms/BoxCTA.svelte' import DiscoverText from '$components/atoms/DiscoverText.svelte' - import PhotoCard from '$components/molecules/PhotoCard.svelte' import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte' + import Collage from '$components/organisms/Collage.svelte' import Locations from '$components/organisms/Locations.svelte' import Shop from '$components/organisms/Shop.svelte' import Newsletter from '$components/organisms/Newsletter.svelte' @@ -45,7 +45,7 @@ // Animate collage photos timeline.add({ - targets: '.homepage__collage .photo-card', + targets: '.collage .photo-card', translateY: ['33.33%', 0], rotate (item: HTMLElement) { return [-4, getComputedStyle(item).getPropertyValue('--rotation')] @@ -98,18 +98,7 @@
-
- {#each photos as { slug, title, image, location, city }} - - {/each} -
+
diff --git a/src/style/molecules/_photo-card.scss b/src/style/molecules/_photo-card.scss index 0996715..bd2e355 100644 --- a/src/style/molecules/_photo-card.scss +++ b/src/style/molecules/_photo-card.scss @@ -20,6 +20,7 @@ width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; + transition: opacity 0.7s var(--ease-quart); } // Informations @@ -66,7 +67,7 @@ & > * { opacity: 0; transform: translate3d(0, 8px, 0); - transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart); + transition: opacity 0.7s var(--ease-quart), transform 0.8s var(--ease-quart); @include bp (md) { transform: translate3d(0, 8px, 0); diff --git a/src/style/organisms/_collage.scss b/src/style/organisms/_collage.scss new file mode 100644 index 0000000..8e8ddb4 --- /dev/null +++ b/src/style/organisms/_collage.scss @@ -0,0 +1,200 @@ +.collage { + display: grid; + grid-template-columns: repeat(16, 1fr); + grid-template-rows: repeat(3, 1fr); + margin: 0 -14vw; + height: 110vw; + + @include bp (sm) { + grid-template-columns: repeat(32, 1fr); + grid-template-rows: repeat(2, 1fr); + margin: 0 -140px; + height: clamp(400px, 40vw, 800px); + } + + .photo-card { + --rotation: 0deg; + position: relative; + display: block; + grid-column-end: span 8; + height: 100%; + margin-left: auto; + margin-right: auto; + transform: rotate(var(--rotation)) translateZ(0); + + @include bp (sm) { + height: clamp(156px, 18vw, 400px); + } + + // First row + // Mobile: Top left + &:nth-child(1) { + --rotation: -10.5deg; + z-index: 5; + grid-column-start: 2; + grid-row: 1; + + @include bp (sm) { + z-index: 10; + top: clamp(24px, 8vw, 128px); + } + } + // Mobile: Middle left + &:nth-child(2) { + --rotation: 3deg; + z-index: 3; + grid-column-start: 1; + grid-row: 2; + margin-top: -10vw; + left: -20vw; + + @include bp (sm) { + z-index: 7; + grid-column-start: 7; + grid-row: 1; + top: clamp(16px, 3vw, 48px); + margin-top: 0; + left: 0; + } + } + // Mobile: Middle center + &:nth-child(3) { + z-index: 4; + grid-column-start: 5; + grid-row: 2; + margin-top: -12vw; + + @include bp (sm) { + z-index: 6; + grid-column-start: 13; + grid-row: 1; + margin-top: 0; + } + } + // Mobile: Middle right + &:nth-child(4) { + --rotation: -3deg; + z-index: 3; + grid-column-start: 8; + grid-row: 2; + margin-top: -7vw; + left: 20vw; + + @include bp (sm) { + z-index: 2; + grid-column-start: 19; + grid-row: 1; + top: clamp(16px, 3vw, 48px); + margin-top: 0; + left: 0; + } + } + // Mobile: Top right + &:nth-child(5) { + --rotation: 10.5deg; + z-index: 6; + grid-column-start: 8; + grid-row: 1; + + @include bp (sm) { + z-index: 1; + top: clamp(24px, 8vw, 128px); + grid-column-start: 24; + } + } + + // Second row + &:nth-child(6) { + display: none; + --rotation: -5.5deg; + + @include bp (sm) { + display: block; + z-index: 9; + grid-column-start: 1; + grid-row: 2; + top: clamp(24px, 5.5vw, 88px); + } + } + &:nth-child(7) { + display: none; + --rotation: -8deg; + + @include bp (sm) { + display: block; + z-index: 8; + grid-column-start: 5; + grid-row: 2; + } + } + // Mobile: Bottom left + &:nth-child(8) { + --rotation: 8deg; + z-index: 2; + grid-column-start: 2; + grid-row: 3; + margin-top: -16vw; + + @include bp (sm) { + z-index: 5; + grid-column-start: 11; + grid-row: 2; + top: calc(-1 * clamp(20px, 3vw, 48px)); + margin-top: 0; + } + } + // Mobile: Bottom right + &:nth-child(9) { + --rotation: -2deg; + z-index: 1; + grid-column-start: 8; + grid-row: 3; + margin-top: -16vw; + + @include bp (sm) { + --rotation: 2deg; + z-index: 4; + grid-column-start: 15; + grid-row: 2; + top: calc(-1 * clamp(20px, 3vw, 48px)); + margin-top: 0; + } + } + &:nth-child(10) { + --rotation: 8deg; + display: none; + + @include bp (sm) { + display: block; + z-index: 3; + grid-column-start: 21; + grid-row: 2; + } + } + &:nth-child(11) { + --rotation: 5.5deg; + display: none; + + @include bp (sm) { + z-index: 2; + grid-column-start: 25; + grid-row: 2; + top: clamp(24px, 5.5vw, 88px); + margin-right: 0; + display: block; + } + } + + // Put card in front when hovering + &:hover { + z-index: 13; + } + + // Not hovered + &.is-inactive { + img { + opacity: 0.5; + } + } + } +} \ No newline at end of file diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index e051365..3ce03ab 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -104,199 +104,6 @@ margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px); } } - &__collage { - display: grid; - grid-template-columns: repeat(16, 1fr); - grid-template-rows: repeat(3, 1fr); - margin: 0 -14vw; - height: 110vw; - - @include bp (sm) { - grid-template-columns: repeat(32, 1fr); - grid-template-rows: repeat(2, 1fr); - margin: 0 -140px; - height: clamp(400px, 40vw, 800px); - } - - .photo-card { - --rotation: 0deg; - position: relative; - display: block; - grid-column-end: span 8; - height: 100%; - margin-left: auto; - margin-right: auto; - transform: rotate(var(--rotation)) translateZ(0); - - @include bp (sm) { - height: clamp(156px, 18vw, 400px); - } - - // First row - // Mobile: Top left - &:nth-child(1) { - --rotation: -10.5deg; - z-index: 5; - grid-column-start: 2; - grid-row: 1; - - @include bp (sm) { - z-index: 10; - top: clamp(24px, 8vw, 128px); - } - } - // Mobile: Middle left - &:nth-child(2) { - --rotation: 3deg; - z-index: 3; - grid-column-start: 1; - grid-row: 2; - margin-top: -10vw; - left: -20vw; - - @include bp (sm) { - z-index: 7; - grid-column-start: 7; - grid-row: 1; - top: clamp(16px, 3vw, 48px); - margin-top: 0; - left: 0; - } - } - // Mobile: Middle center - &:nth-child(3) { - z-index: 4; - grid-column-start: 5; - grid-row: 2; - margin-top: -12vw; - - @include bp (sm) { - z-index: 6; - grid-column-start: 13; - grid-row: 1; - margin-top: 0; - } - } - // Mobile: Middle right - &:nth-child(4) { - --rotation: -3deg; - z-index: 3; - grid-column-start: 8; - grid-row: 2; - margin-top: -7vw; - left: 20vw; - - @include bp (sm) { - z-index: 2; - grid-column-start: 19; - grid-row: 1; - top: clamp(16px, 3vw, 48px); - margin-top: 0; - left: 0; - } - } - // Mobile: Top right - &:nth-child(5) { - --rotation: 10.5deg; - z-index: 6; - grid-column-start: 8; - grid-row: 1; - - @include bp (sm) { - z-index: 1; - top: clamp(24px, 8vw, 128px); - grid-column-start: 24; - } - } - - // Second row - &:nth-child(6) { - display: none; - --rotation: -5.5deg; - - @include bp (sm) { - display: block; - z-index: 9; - grid-column-start: 1; - grid-row: 2; - top: clamp(24px, 5.5vw, 88px); - } - } - &:nth-child(7) { - display: none; - --rotation: -8deg; - - @include bp (sm) { - display: block; - z-index: 8; - grid-column-start: 5; - grid-row: 2; - } - } - // Mobile: Bottom left - &:nth-child(8) { - --rotation: 8deg; - z-index: 2; - grid-column-start: 2; - grid-row: 3; - margin-top: -16vw; - - @include bp (sm) { - z-index: 5; - grid-column-start: 11; - grid-row: 2; - top: calc(-1 * clamp(20px, 3vw, 48px)); - margin-top: 0; - } - } - // Mobile: Bottom right - &:nth-child(9) { - --rotation: -2deg; - z-index: 1; - grid-column-start: 8; - grid-row: 3; - margin-top: -16vw; - - @include bp (sm) { - --rotation: 2deg; - z-index: 4; - grid-column-start: 15; - grid-row: 2; - top: calc(-1 * clamp(20px, 3vw, 48px)); - margin-top: 0; - } - } - &:nth-child(10) { - --rotation: 8deg; - display: none; - - @include bp (sm) { - display: block; - z-index: 3; - grid-column-start: 21; - grid-row: 2; - } - } - &:nth-child(11) { - --rotation: 5.5deg; - display: none; - - @include bp (sm) { - z-index: 2; - grid-column-start: 25; - grid-row: 2; - top: clamp(24px, 5.5vw, 88px); - margin-right: 0; - display: block; - } - } - - // Put card in front when hovering - &:hover { - z-index: 13; - } - } - } // CTAS &__ctas { diff --git a/src/style/style.scss b/src/style/style.scss index 9750ae3..bfd2c80 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -61,6 +61,7 @@ @import "molecules/shop-locationswitcher"; // Organisms +@import "organisms/collage"; @import "organisms/locations"; @import "organisms/house"; @import "organisms/newsletter";