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

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

@@ -242,8 +242,9 @@
<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)}
<div class="viewer-photo__picture is-{currentIndex === 0 ? index + 1 : index}">
<Image <Image
class="photo photo--{currentIndex === 0 ? index + 1 : index}" class="photo"
id={photo.image.id} id={photo.image.id}
alt={photo.title} alt={photo.title}
sizeKey="photo-list" sizeKey="photo-list"
@@ -254,6 +255,7 @@
}} }}
ratio={1.5} ratio={1.5}
/> />
</div>
{/each} {/each}
<div class="viewer-photo__controls"> <div class="viewer-photo__controls">

122
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;
}
.photo { &__picture {
--opacity: 1; --opacity: 1;
--scale: 0.6; --scale: 0.6;
--rotate: 0deg; --rotate: 0deg;
--offset-x: -50%; --offset-x: 0%;
--offset-y: -30%; --offset-y: 0%;
position: absolute; position: absolute;
top: 50%; z-index: 8;
left: 50%; top: 0;
display: block; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 8; transform: translateZ(0);
overflow: hidden; will-change: transform, opacity;
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);
@include bp (md) { @include bp (md) {
--scale: 0.6; --scale: 0.6;
--rotate: 5deg; --rotate: 5deg;
--offset-x: 13%; --offset-x: 28.5%;
--offset-y: -65%; --offset-y: 0%;
top: 50%; top: 0;
left: 0; left: 0;
transform-origin: bottom right; transform-origin: bottom right;
} }
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
will-change: transform;
picture {
position: absolute;
top: 0;
left: 0;
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) { @include bp (md) {
--scale: 1.075; --scale: 1.075;
--rotate: -1deg; --rotate: -1deg;
--offset-x: -4%; --offset-x: -9%;
--offset-y: -47.5%; --offset-y: 0%;
} }
} }
// First visible photo // First visible photo
&--1 { &.is-1 {
--scale: 1; --scale: 1;
--rotate: 0deg; --rotate: 0deg;
--offset-y: -50%; --offset-y: 0%;
opacity: 1;
.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) { @include bp (md) {
--offset-x: 0%; --offset-x: 0%;
--offset-y: -50%; --offset-y: 0%;
} }
} }
&--2 { &.is-2 {
--scale: 0.9; --scale: 0.9;
--opacity: 0.75; --opacity: 0.75;
--offset-y: -34%; --offset-y: 12%;
z-index: 7; z-index: 7;
opacity: 1;
@include bp (md) { @include bp (md) {
--scale: 0.9; --scale: 0.9;
--rotate: 1deg; --rotate: 1deg;
--offset-x: 3.75%; --offset-x: 9.5%;
--offset-y: -54%; --offset-y: 0%;
} }
} }
&--3 { &.is-3 {
--scale: 0.83; --scale: 0.83;
--opacity: 0.55; --opacity: 0.55;
--offset-y: -22.5%; --offset-y: 20%;
z-index: 6; z-index: 6;
opacity: 1;
@include bp (md) { @include bp (md) {
--scale: 0.83; --scale: 0.83;
--rotate: 2deg; --rotate: 2deg;
--offset-x: 6.5%; --offset-x: 16.25%;
--offset-y: -56.5%; --offset-y: 0%;
} }
} }
&--4 { &.is-4 {
--scale: 0.75; --scale: 0.75;
--opacity: 0.45; --opacity: 0.45;
--offset-y: -11%; --offset-y: 27.5%;
z-index: 5; z-index: 5;
opacity: 1;
@include bp (md) { @include bp (md) {
--scale: 0.75; --scale: 0.75;
--rotate: 3deg; --rotate: 3deg;
--offset-x: 9%; --offset-x: 22%;
--offset-y: -59%; --offset-y: 0%;
} }
} }
&--5 { &.is-5 {
--scale: 0.68; --scale: 0.68;
--opacity: 0.25; --opacity: 0.25;
--offset-y: -1.5%; --offset-y: 33%;
z-index: 4; z-index: 4;
opacity: 1;
@include bp (md) { @include bp (md) {
--scale: 0.68; --scale: 0.68;
--rotate: 4deg; --rotate: 4deg;
--offset-x: 10.5%; --offset-x: 27%;
--offset-y: -61.5%; --offset-y: 0%;
} }
} }
&--6 { &.is-6 {
--opacity: 0.25; --opacity: 0.25;
z-index: 3; z-index: 3;
.photo {
opacity: 0;
}
}
&.is-7 {
.photo {
opacity: 0; opacity: 0;
} }
} }