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

feat: add clicked effect on Photo viewer nav buttons + fade on name

Browse Source
This commit is contained in:
Félix Péault
2024-08-03 14:42:53 +02:00
parent 0c8076097e
commit 8186e07335
2 changed files with 471 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
View File

@@ -224,14 +224,14 @@
*/
const animation = timeline([
// First photo
['.photo-page__picture.is-1', {
['.picture.is-1', {
y: [24, 0],
opacity: [0, 1],
}, {
duration: 0.9,
}],
// Other photos
['.photo-page__picture:not(.is-1)', {
['.picture:not(.is-1)', {
x: ['-15%', '0%'],
opacity: [0, 1],
}, {
@@ -241,13 +241,13 @@
}],
// Prev/Next buttons
['.photo-page__controls .prev', {
['.controls .prev button', {
x: [-16, 0],
opacity: [0, 1],
}, {
at: 0.45,
}],
['.photo-page__controls .next', {
['.controls .next button', {
x: [16, 0],
opacity: [0, 1],
}, {
@@ -255,7 +255,7 @@
}],
// Infos
['.photo-page__info > *', {
['.info > *', {
y: [24, 0],
opacity: [0, 1],
}, {
@@ -264,7 +264,7 @@
}],
// Index
['.photo-page__index', {
['.index', {
opacity: [0, 1],
}, {
at: 0.6,
@@ -272,7 +272,7 @@
duration: 0.9,
}],
// Fly each number
['.photo-page__index .char', {
['.index .char', {
y: ['300%', 0],
}, {
at: 1.1,
@@ -306,7 +306,7 @@
<main class="photo-page">
<div class="container grid">
<p class="photo-page__notice text-label">Tap for fullscreen</p>
<p class="notice text-label">Tap for fullscreen</p>
<ButtonCircle
tag="a"
@@ -320,15 +320,15 @@
</svg>
</ButtonCircle>
<div class="photo-page__carousel">
<div class="carousel">
<div
class="photo-page__images"
class="images"
use:swipe
onswipe={handleSwipe}
ontap={toggleFullscreen}
>
{#each visiblePhotos as { id, image, title }, index (id)}
<div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
<div class="picture is-{currentIndex === 0 ? index + 1 : index}">
<Image
class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
id={image.id}
@@ -344,24 +344,32 @@
</div>
{/each}
<div class="photo-page__controls">
<ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} onclick={goToPrevious}>
<nav class="controls">
<div class="prev" class:is-disabled={!canGoNext}>
<ButtonCircle class="shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} onclick={goToPrevious}>
<IconArrow color="pink" flip={true} />
</ButtonCircle>
<ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} onclick={goToNext}>
</div>
<div class="next" class:is-disabled={!canGoPrev}>
<ButtonCircle class="shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} onclick={goToNext}>
<IconArrow color="pink" />
</ButtonCircle>
</div>
</nav>
<div class="photo-page__index title-index">
<div class="index title-index">
<SplitText text={padZero(currentPhotoIndex)} mode="chars" />
</div>
</div>
<div class="photo-page__info">
<h1 class="title-medium">{currentPhoto.title}</h1>
<div class="info">
<div class="name">
{#key currentPhoto}
<h1 class="title-medium" in:fade={{ duration: 250, delay: 250 }} out:fade={{ duration: 250 }}>
{currentPhoto.title}
</h1>
{/key}
</div>
<div class="detail text-info">
<a href="/{data.location.country.slug}/{data.location.slug}" data-sveltekit-noscroll>
@@ -386,7 +394,7 @@
{#if isFullscreen}
<div
bind:this={fullscreenEl}
class="photo-page__fullscreen"
class="fullscreen"
onclick={toggleFullscreen}
in:fade={{ easing: quartOut, duration: 1000 }}
out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}

101
apps/website/src/style/pages/_viewer.scss
View File

@@ -6,6 +6,38 @@
align-items: center;
overflow: hidden;
// Close button
:global(.close) {
--offset: 16px;
position: fixed !important;
z-index: 2;
top: var(--offset);
right: var(--offset);
@include bp (sm) {
--offset: clamp(20px, 3vw, 40px);
}
:global(svg) {
max-width: 14px;
max-height: 14px;
@include bp (md) {
max-width: 20px;
max-height: 20px;
}
}
// Hover
&:hover {
:global(svg) {
transform: rotate3d(0, 0, 1, 90deg) !important;
transition-duration: 1.2s;
}
}
}
}
.container {
position: relative;
width: 100%;
@@ -17,7 +49,7 @@
}
// Carousel
&__carousel {
.carousel {
position: absolute;
top: 0;
left: 50%;
@@ -44,7 +76,7 @@
}
// Images
&__images {
.images {
position: relative;
width: 100%;
margin: auto auto 0;
@@ -52,7 +84,7 @@
touch-action: none;
}
&__picture {
.picture {
--opacity: 1;
--scale: 0.6;
--rotate: 0deg;
@@ -220,7 +252,7 @@
}
// Infos
&__info {
.info {
bottom: 0;
margin-top: auto;
margin-bottom: 40px;
@@ -239,7 +271,11 @@
align-items: baseline;
}
.name {
display: grid;
}
h1 {
grid-area: 1 / -1 / 1 / -1;
color: $color-secondary;
font-size: clamp(#{rem(18px)}, 5.5vw, #{rem(28px)});
line-height: 1.1;
@@ -290,7 +326,7 @@
}
// Index
&__index {
.index {
position: absolute;
z-index: 1;
left: 50%;
@@ -322,7 +358,7 @@
}
// Controls
&__controls {
.controls {
display: none;
@include bp (md) {
@@ -337,12 +373,19 @@
pointer-events: none;
}
:global(button) {
div {
transition: transform 0.3s var(--ease-quart);
pointer-events: auto;
// State: Shrink down when clicking
&:not(.is-disabled):active {
transform: scale(0.9);
}
}
// Prev button
&:first-child {
& > :global(*:nth-child(2)) {
.prev :global(button) {
:global(> *:nth-child(2)) {
transform: translate3d(100%, -50%, 0) rotate(180deg);
}
@@ -357,7 +400,9 @@
}
}
// Hover
// State: Hover
:global(button) {
// Common button styles
&:not([disabled]):hover {
background-color: $color-secondary;
color: #fff;
@@ -370,7 +415,7 @@
}
// Fullscreen viewer
&__fullscreen {
.fullscreen {
position: absolute;
z-index: 102;
top: 0;
@@ -419,7 +464,7 @@
}
// Notice
&__notice {
.notice {
position: absolute;
top: 16px;
left: 20px;
@@ -430,35 +475,3 @@
display: none;
}
}
// Close button
:global(.close) {
--offset: 16px;
position: fixed !important;
z-index: 2;
top: var(--offset);
right: var(--offset);
@include bp (sm) {
--offset: clamp(20px, 3vw, 40px);
}
:global(svg) {
max-width: 14px;
max-height: 14px;
@include bp (md) {
max-width: 20px;
max-height: 20px;
}
}
// Hover
&:hover {
:global(svg) {
transform: rotate3d(0, 0, 1, 90deg) !important;
transition-duration: 1.2s;
}
}
}
}