Place: Add photo Transition In, Add Illustration system, Visual fixes
- Add a transition in on each photo component (scale down + fade in), TODO: Parallax on number - Illustration takes two images and changes the source depending on the viewport size
This commit is contained in:
48
src/animations/Photo.js
Normal file
48
src/animations/Photo.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import anime from 'animejs'
|
||||
import ScrollOut from 'scroll-out'
|
||||
import { animDuration, animDurationLong } from '../utils/store'
|
||||
import { debounce } from '../utils/functions'
|
||||
|
||||
|
||||
/*
|
||||
** Transition In
|
||||
*/
|
||||
export const animateIn = scope => {
|
||||
// Title appearing
|
||||
const titleReveal = ScrollOut({
|
||||
once: true,
|
||||
targets: scope,
|
||||
offset: window.offsetHeight / 3,
|
||||
onShown (el) {
|
||||
// Title reveal
|
||||
anime({
|
||||
targets: el.querySelectorAll('h2 span'),
|
||||
translateY: ['100%', 0],
|
||||
duration: 1000,
|
||||
delay: anime.stagger(120),
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Photo appearing
|
||||
const photoReveal = ScrollOut({
|
||||
once: true,
|
||||
targets: scope.querySelector('picture'),
|
||||
offset: window.offsetHeight / 3,
|
||||
onShown (el) {
|
||||
// Title reveal
|
||||
anime({
|
||||
targets: el.querySelector('img'),
|
||||
scale: [1.12, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 2000,
|
||||
delay: 50,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Number parallax
|
||||
//! TODO
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { fly } from 'svelte/transition'
|
||||
import { quartOut } from 'svelte/easing'
|
||||
import { site, currentLocation } from '../utils/store'
|
||||
import { getThumbnail, formatDate } from '../utils/functions'
|
||||
|
||||
// Animations
|
||||
import { animateIn } from '../animations/Photo'
|
||||
|
||||
// Props and variables
|
||||
export let photo
|
||||
export let index
|
||||
@@ -22,10 +23,11 @@
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
*/
|
||||
onMount(() => {
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
animateIn(scope)
|
||||
|
||||
// Parallax on photo when the image has been loaded
|
||||
// const parallaxNumber = basicScroll.default.create({
|
||||
// elem: photoElement.querySelector('.photo__number'),
|
||||
@@ -45,14 +47,13 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="photo"
|
||||
bind:this={photoElement}
|
||||
in:fly="{{ y: 40, duration: 1000, easing: quartOut }}"
|
||||
>
|
||||
<div class="photo" bind:this={scope}>
|
||||
<div class="photo__location wrap">
|
||||
<div class="wrapper">
|
||||
<h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
|
||||
<h2 class="title-location">
|
||||
<span>{photo.name.split(', ')[0]},</span>
|
||||
<span>{photo.name.split(', ')[1]}</span>
|
||||
</h2>
|
||||
<p class="style-caps">{location.region}, {location.country.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,7 +72,7 @@
|
||||
width={defaultWidth} height={defaultHeight}
|
||||
alt={imgAlt}
|
||||
class="lazyload"
|
||||
data-aos="scale-down-fade-in" data-aos-once="true">
|
||||
>
|
||||
|
||||
{:else}
|
||||
<source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}>
|
||||
@@ -85,7 +86,9 @@
|
||||
<time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
|
||||
{formatDate(photo.date, 'FULL')}
|
||||
</time>
|
||||
<span class="photo__number">{(index < 10 ? '0': '') + index}</span>
|
||||
<span class="photo__number">
|
||||
{(index < 10 ? '0': '') + index}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,25 @@
|
||||
// Preload data
|
||||
export async function preload (page, session) {
|
||||
// Load photos
|
||||
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,date,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
|
||||
// const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,date,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.place}%&limit=-1&sort=-created_on,name`)
|
||||
const req = await this.fetch(apiEndpoints.gql, {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query: `{
|
||||
photos (filter: { slug_has: "${page.params.place}" }, limit: -1) {
|
||||
data {
|
||||
id
|
||||
name
|
||||
slug
|
||||
date
|
||||
created_on
|
||||
modified_on
|
||||
}
|
||||
}
|
||||
}`})
|
||||
})
|
||||
const photos = await req.json()
|
||||
console.log(photos)
|
||||
if (req.ok) {
|
||||
return { photos: photos.data }
|
||||
}
|
||||
@@ -50,7 +67,7 @@
|
||||
let layoutSetting
|
||||
|
||||
// Update current location
|
||||
const location = $locations.find(loc => loc.slug === $page.params.location)
|
||||
const location = $locations.find(loc => loc.slug === $page.params.place)
|
||||
currentLocation.set(location)
|
||||
currentPhotos.set(photos)
|
||||
|
||||
@@ -149,11 +166,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="place__illustration">
|
||||
<div class="place__illustration--left side"></div>
|
||||
<div class="place__illustration--center"></div>
|
||||
<div class="place__illustration--right side"></div>
|
||||
</div>
|
||||
<div class="place__illustration"
|
||||
style="--url-desktop: url({location.illustration_desktop.full_url}); --url-mobile: url({location.illustration_mobile.full_url});"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="photos photos--{layoutSetting || 'list'}">
|
||||
@@ -15,11 +15,15 @@
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
overflow: hidden;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-lightgray;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.photos {
|
||||
position: relative;
|
||||
margin-top: -22px;
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
@@ -107,7 +108,6 @@
|
||||
// Number
|
||||
&__number {
|
||||
@include breakpoint (sm) {
|
||||
transform: translate(-50%, var(--translate));
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,28 @@
|
||||
// Place section
|
||||
.place {
|
||||
position: relative;
|
||||
background-position: 50% 0;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Title
|
||||
&__title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: pxVW(400) 0 pxVW(400);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
padding: pxVW(350) 0 pxVW(200);
|
||||
text-align: center;
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: $screen-xs) {
|
||||
height: 144vw;
|
||||
padding: 0;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
padding: pxVW(224) 0 pxVW(240);
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
padding: pxVW(208) 0 pxVW(320);
|
||||
height: auto;
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
padding-top: 240px;
|
||||
@@ -26,7 +32,8 @@
|
||||
h1 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
|
||||
.anim-translate {
|
||||
@@ -37,16 +44,22 @@
|
||||
&_bottom {
|
||||
text-align: right;
|
||||
margin-left: pxVW(128);
|
||||
|
||||
@include breakpoint (xl) {
|
||||
margin-left: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
// Switcher button
|
||||
.button-control--dashed {
|
||||
.button-control {
|
||||
z-index: 1;
|
||||
margin: 32px auto 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: -12px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-left: -24px;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -146,7 +159,13 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(/img/illustration.png) 0 0 no-repeat;
|
||||
background-image: var(--url-mobile);
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
background-image: var(--url-desktop);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user