flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a parent to each photo on Viewer

Browse Source 
Allows to animate the parent that has no transform/top
This commit is contained in:
Félix Péault
2021-11-30 19:47:42 +01:00
parent 47fee17eb8
commit 2522233a0e
2 changed files with 137 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/routes/[country]/[location]/[photo].svelte
View File

@@ -242,18 +242,20 @@
<div class="viewer-photo__carousel"> <div class="viewer-photo__carousel">
<div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}> <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
{#each visiblePhotos as photo, index (photo.id)} {#each visiblePhotos as photo, index (photo.id)}
<Image <div class="viewer-photo__picture is-{currentIndex === 0 ? index + 1 : index}">
class="photo photo--{currentIndex === 0 ? index + 1 : index}" <Image
id={photo.image.id} class="photo"
alt={photo.title} id={photo.image.id}
sizeKey="photo-list" alt={photo.title}
sizes={{ sizeKey="photo-list"
small: { width: 500 }, sizes={{
medium: { width: 850 }, small: { width: 500 },
large: { width: 1280 }, medium: { width: 850 },
}} large: { width: 1280 },
ratio={1.5} }}
/> ratio={1.5}
/>
</div>
{/each} {/each}
<div class="viewer-photo__controls"> <div class="viewer-photo__controls">

222
src/style/pages/_viewer-photo.scss
View File

@@ -45,39 +45,53 @@
margin: auto auto 0; margin: auto auto 0;
padding-top: 66.66%; padding-top: 66.66%;
touch-action: none; touch-action: none;
}
&__picture {
--opacity: 1;
--scale: 0.6;
--rotate: 0deg;
--offset-x: 0%;
--offset-y: 0%;
position: absolute;
z-index: 8;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
will-change: transform, opacity;
@include bp (md) {
--scale: 0.6;
--rotate: 5deg;
--offset-x: 28.5%;
--offset-y: 0%;
top: 0;
left: 0;
transform-origin: bottom right;
}
.photo { .photo {
--opacity: 1;
--scale: 0.6;
--rotate: 0deg;
--offset-x: -50%;
--offset-y: -30%;
position: absolute; position: absolute;
top: 50%; top: 0;
left: 50%; left: 0;
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 8;
overflow: hidden;
opacity: 0;
background: $color-primary;
transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate)); transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
transform-origin: top center;
cursor: default;
will-change: transform;
transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart); transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
will-change: transform;
@include bp (md) { picture {
--scale: 0.6; position: absolute;
--rotate: 5deg; top: 0;
--offset-x: 13%;
--offset-y: -65%;
top: 50%;
left: 0; left: 0;
transform-origin: bottom right; width: 100%;
height: 100%;
overflow: hidden;
background: $color-primary;
cursor: default;
} }
img { img {
display: block; display: block;
width: 100%; width: 100%;
@@ -87,99 +101,109 @@
transform: translateZ(0); transform: translateZ(0);
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
transition: opacity 1s var(--ease-quart);
} }
}
// Hidden photo over // Hidden photo over
&--0 { &.is-0 {
--scale: 1.05; --scale: 1.03;
--rotate: 0deg; --rotate: 0deg;
--offset-x: -50%; --offset-x: 0%;
--offset-y: -62.5%; --offset-y: -7%;
z-index: 9; z-index: 9;
.photo {
opacity: 0; opacity: 0;
@include bp (md) {
--scale: 1.075;
--rotate: -1deg;
--offset-x: -4%;
--offset-y: -47.5%;
}
} }
// First visible photo
&--1 { @include bp (md) {
--scale: 1; --scale: 1.075;
--rotate: 0deg; --rotate: -1deg;
--offset-y: -50%; --offset-x: -9%;
opacity: 1; --offset-y: 0%;
}
}
// First visible photo
&.is-1 {
--scale: 1;
--rotate: 0deg;
--offset-y: 0%;
.photo {
box-shadow: box-shadow:
0 12px 12px rgba(#000, 0.15), 0 12px 12px rgba(#000, 0.15),
0 20px 20px rgba(#000, 0.15), 0 20px 20px rgba(#000, 0.15),
0 48px 48px rgba(#000, 0.15); 0 48px 48px rgba(#000, 0.15);
@include bp (md) {
--offset-x: 0%;
--offset-y: -50%;
}
} }
&--2 {
@include bp (md) {
--offset-x: 0%;
--offset-y: 0%;
}
}
&.is-2 {
--scale: 0.9;
--opacity: 0.75;
--offset-y: 12%;
z-index: 7;
@include bp (md) {
--scale: 0.9; --scale: 0.9;
--opacity: 0.75; --rotate: 1deg;
--offset-y: -34%; --offset-x: 9.5%;
z-index: 7; --offset-y: 0%;
opacity: 1;
@include bp (md) {
--scale: 0.9;
--rotate: 1deg;
--offset-x: 3.75%;
--offset-y: -54%;
}
} }
&--3 { }
&.is-3 {
--scale: 0.83;
--opacity: 0.55;
--offset-y: 20%;
z-index: 6;
@include bp (md) {
--scale: 0.83; --scale: 0.83;
--opacity: 0.55; --rotate: 2deg;
--offset-y: -22.5%; --offset-x: 16.25%;
z-index: 6; --offset-y: 0%;
opacity: 1;
@include bp (md) {
--scale: 0.83;
--rotate: 2deg;
--offset-x: 6.5%;
--offset-y: -56.5%;
}
} }
&--4 { }
&.is-4 {
--scale: 0.75;
--opacity: 0.45;
--offset-y: 27.5%;
z-index: 5;
@include bp (md) {
--scale: 0.75; --scale: 0.75;
--opacity: 0.45; --rotate: 3deg;
--offset-y: -11%; --offset-x: 22%;
z-index: 5; --offset-y: 0%;
opacity: 1;
@include bp (md) {
--scale: 0.75;
--rotate: 3deg;
--offset-x: 9%;
--offset-y: -59%;
}
} }
&--5 { }
&.is-5 {
--scale: 0.68;
--opacity: 0.25;
--offset-y: 33%;
z-index: 4;
@include bp (md) {
--scale: 0.68; --scale: 0.68;
--opacity: 0.25; --rotate: 4deg;
--offset-y: -1.5%; --offset-x: 27%;
z-index: 4; --offset-y: 0%;
opacity: 1;
@include bp (md) {
--scale: 0.68;
--rotate: 4deg;
--offset-x: 10.5%;
--offset-y: -61.5%;
}
} }
&--6 { }
--opacity: 0.25; &.is-6 {
z-index: 3; --opacity: 0.25;
z-index: 3;
.photo {
opacity: 0;
}
}
&.is-7 {
.photo {
opacity: 0; opacity: 0;
} }
} }