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

56
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}>
<IconArrow color="pink" flip={true} />
</ButtonCircle>
<ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} onclick={goToNext}>
<IconArrow color="pink" />
</ButtonCircle>
</div>
<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>
</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 }}