Use PageTransition component on every route
- Scrolls back to top when mounting new page with a timeout of the delay - Rename photo Viewer class - Change Shop posters section text from p to label
This commit is contained in:
@@ -16,6 +16,7 @@
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import SplitText from '$components/SplitText.svelte'
|
||||
import PageTransition from '$components/PageTransition.svelte'
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
import IconArrow from '$components/atoms/IconArrow.svelte'
|
||||
@@ -227,22 +228,22 @@
|
||||
easing: 'easeOutQuart',
|
||||
})
|
||||
|
||||
anime.set('.viewer-photo__picture', {
|
||||
anime.set('.viewer__picture', {
|
||||
opacity: 0,
|
||||
})
|
||||
anime.set('.viewer-photo__picture.is-1', {
|
||||
anime.set('.viewer__picture.is-1', {
|
||||
translateY: 24,
|
||||
})
|
||||
|
||||
// Photos
|
||||
timeline.add({
|
||||
targets: '.viewer-photo__picture.is-1',
|
||||
targets: '.viewer__picture.is-1',
|
||||
opacity: 1,
|
||||
translateY: 0,
|
||||
duration: 900,
|
||||
}, 250)
|
||||
timeline.add({
|
||||
targets: '.viewer-photo__picture:not(.is-0):not(.is-1)',
|
||||
targets: '.viewer__picture:not(.is-0):not(.is-1)',
|
||||
opacity: 1,
|
||||
translateX (element: HTMLElement, index: number) {
|
||||
const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
|
||||
@@ -253,7 +254,7 @@
|
||||
|
||||
// Prev/Next buttons
|
||||
timeline.add({
|
||||
targets: '.viewer-photo__controls button',
|
||||
targets: '.viewer__controls button',
|
||||
translateX (item: HTMLElement) {
|
||||
let direction = item.classList.contains('prev') ? -1 : 1
|
||||
return [16 * direction, 0]
|
||||
@@ -264,25 +265,25 @@
|
||||
|
||||
// Infos
|
||||
timeline.add({
|
||||
targets: '.viewer-photo__info > *',
|
||||
targets: '.viewer__info > *',
|
||||
translateY: [24, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(200)
|
||||
}, 400)
|
||||
|
||||
|
||||
anime.set('.viewer-photo__index', {
|
||||
anime.set('.viewer__index', {
|
||||
opacity: 0
|
||||
})
|
||||
// Index
|
||||
timeline.add({
|
||||
targets: '.viewer-photo__index',
|
||||
targets: '.viewer__index',
|
||||
opacity: 1,
|
||||
duration: 900,
|
||||
}, 600)
|
||||
// Fly each number
|
||||
timeline.add({
|
||||
targets: '.viewer-photo__index .char',
|
||||
targets: '.viewer__index .char',
|
||||
translateY: ['100%', 0],
|
||||
delay: anime.stagger(200),
|
||||
duration: 1000,
|
||||
@@ -313,25 +314,25 @@
|
||||
{/if}
|
||||
|
||||
|
||||
<main class="viewer-photo">
|
||||
<PageTransition name="viewer">
|
||||
<div class="container grid">
|
||||
<p class="viewer-photo__notice text-label">Tap for fullscreen</p>
|
||||
<p class="viewer__notice text-label">Tap for fullscreen</p>
|
||||
|
||||
<ButtonCircle
|
||||
tag="a"
|
||||
url={previousUrl}
|
||||
color="purple"
|
||||
class="viewer-photo__close shadow-box-dark"
|
||||
class="viewer__close shadow-box-dark"
|
||||
>
|
||||
<svg width="12" height="12">
|
||||
<use xlink:href="#cross">
|
||||
</svg>
|
||||
</ButtonCircle>
|
||||
|
||||
<div class="viewer-photo__carousel">
|
||||
<div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
|
||||
<div class="viewer__carousel">
|
||||
<div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
|
||||
{#each visiblePhotos as photo, index (photo.id)}
|
||||
<div class="viewer-photo__picture is-{currentIndex === 0 ? index + 1 : index}">
|
||||
<div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
|
||||
<Image
|
||||
class="photo"
|
||||
id={photo.image.id}
|
||||
@@ -347,7 +348,7 @@
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="viewer-photo__controls">
|
||||
<div class="viewer__controls">
|
||||
<ButtonCircle class="prev shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
|
||||
<IconArrow color="pink" flip={true} />
|
||||
</ButtonCircle>
|
||||
@@ -357,12 +358,12 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="viewer-photo__index title-index">
|
||||
<div class="viewer__index title-index">
|
||||
<SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewer-photo__info">
|
||||
<div class="viewer__info">
|
||||
<h1 class="title-medium">{currentPhoto.title}</h1>
|
||||
|
||||
<div class="detail text-info">
|
||||
@@ -383,7 +384,7 @@
|
||||
</div>
|
||||
|
||||
{#if isFullscreen}
|
||||
<div class="viewer-photo__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}>
|
||||
<div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}>
|
||||
<div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
|
||||
<Image
|
||||
id={currentPhoto.image.id}
|
||||
@@ -400,7 +401,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</PageTransition>
|
||||
|
||||
|
||||
<script context="module" lang="ts">
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
import { DURATION } from '$utils/contants'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import PageTransition from '$components/PageTransition.svelte'
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import IconEarth from '$components/atoms/IconEarth.svelte'
|
||||
@@ -209,7 +210,7 @@
|
||||
<svelte:window bind:scrollY />
|
||||
|
||||
|
||||
<main class="location-page">
|
||||
<PageTransition name="location-page">
|
||||
<section class="location-page__intro grid" bind:this={introEl}>
|
||||
<h1 class="title" class:is-short={location.name.length <= 4}>
|
||||
<span class="housesof mask">
|
||||
@@ -349,7 +350,7 @@
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</PageTransition>
|
||||
|
||||
|
||||
<script context="module" lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user