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

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

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