Isolate Homepage collage component and add hover effect on other photos
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
|
||||
export let id: string
|
||||
@@ -7,16 +8,25 @@
|
||||
export let title: string = undefined
|
||||
export let location: any = undefined
|
||||
export let city: string = undefined
|
||||
export let hovered: boolean = false
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const sizes = {
|
||||
small: { width: 224 },
|
||||
medium: { width: 464 },
|
||||
large: { width: 864 },
|
||||
}
|
||||
|
||||
const sendHover = (hover: boolean) => dispatch('hover', hover)
|
||||
</script>
|
||||
|
||||
<div class="photo-card">
|
||||
<div class="photo-card"
|
||||
class:is-inactive={hovered}
|
||||
on:mouseenter={() => sendHover(true)}
|
||||
on:focus={() => sendHover(true)}
|
||||
on:mouseout={() => sendHover(false)}
|
||||
on:blur={() => sendHover(false)}
|
||||
>
|
||||
{#if url}
|
||||
<a href={url}>
|
||||
<Image
|
||||
|
||||
24
src/components/organisms/Collage.svelte
Normal file
24
src/components/organisms/Collage.svelte
Normal file
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import PhotoCard from '$components/molecules/PhotoCard.svelte'
|
||||
|
||||
export let photos: any[] = []
|
||||
|
||||
let hovered: number = null
|
||||
</script>
|
||||
|
||||
{#if photos}
|
||||
<div class="collage">
|
||||
{#each photos as { slug, title, image, location, city }, index}
|
||||
<PhotoCard
|
||||
id={image.id}
|
||||
alt={title}
|
||||
url="/{location.country.slug}/{location.slug}/{slug}"
|
||||
title={title}
|
||||
location={location}
|
||||
city={city}
|
||||
hovered={hovered !== null && hovered !== index}
|
||||
on:hover={({ detail }) => hovered = detail ? index : null}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -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 @@
|
||||
</section>
|
||||
|
||||
<section class="homepage__photos">
|
||||
<div class="homepage__collage">
|
||||
{#each photos as { slug, title, image, location, city }}
|
||||
<PhotoCard
|
||||
id={image.id}
|
||||
alt={title}
|
||||
url="/{location.country.slug}/{location.slug}/{slug}"
|
||||
title={title}
|
||||
location={location}
|
||||
city={city}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<Collage {photos} />
|
||||
</section>
|
||||
|
||||
<div class="homepage__ctas" id="ctas">
|
||||
|
||||
@@ -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);
|
||||
|
||||
200
src/style/organisms/_collage.scss
Normal file
200
src/style/organisms/_collage.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
@import "molecules/shop-locationswitcher";
|
||||
|
||||
// Organisms
|
||||
@import "organisms/collage";
|
||||
@import "organisms/locations";
|
||||
@import "organisms/house";
|
||||
@import "organisms/newsletter";
|
||||
|
||||
Reference in New Issue
Block a user