From debd9a41c100309581f290d76924967fcdd2b0b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 10 Mar 2020 21:25:48 +0100 Subject: [PATCH] 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 --- src/animations/Photo.js | 48 +++++++++++++++++++ src/molecules/Photo.svelte | 27 ++++++----- .../{[location].svelte => [place].svelte} | 29 ++++++++--- src/style/molecules/_photo.scss | 6 ++- src/style/organisms/_photos.scss | 2 +- src/style/pages/_place.scss | 39 +++++++++++---- 6 files changed, 120 insertions(+), 31 deletions(-) create mode 100644 src/animations/Photo.js rename src/routes/location/[country]/{[location].svelte => [place].svelte} (85%) diff --git a/src/animations/Photo.js b/src/animations/Photo.js new file mode 100644 index 0000000..75c8beb --- /dev/null +++ b/src/animations/Photo.js @@ -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 +} diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte index 8d0ada4..0561684 100644 --- a/src/molecules/Photo.svelte +++ b/src/molecules/Photo.svelte @@ -1,10 +1,11 @@ -
-

{photo.name.replace(', ', ',\n')}

+

+ {photo.name.split(', ')[0]}, + {photo.name.split(', ')[1]} +

{location.region}, {location.country.name}

@@ -71,7 +72,7 @@ width={defaultWidth} height={defaultHeight} alt={imgAlt} class="lazyload" - data-aos="scale-down-fade-in" data-aos-once="true"> + > {:else} @@ -85,7 +86,9 @@ - {(index < 10 ? '0': '') + index} + + {(index < 10 ? '0': '') + index} +
diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[place].svelte similarity index 85% rename from src/routes/location/[country]/[location].svelte rename to src/routes/location/[country]/[place].svelte index d4ecd5d..92fc2bd 100644 --- a/src/routes/location/[country]/[location].svelte +++ b/src/routes/location/[country]/[place].svelte @@ -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 @@ -
-
-
-
-
+
diff --git a/src/style/molecules/_photo.scss b/src/style/molecules/_photo.scss index edffd38..2f5abcf 100644 --- a/src/style/molecules/_photo.scss +++ b/src/style/molecules/_photo.scss @@ -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; diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss index 4f9ec8d..6323b5a 100644 --- a/src/style/organisms/_photos.scss +++ b/src/style/organisms/_photos.scss @@ -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; } } diff --git a/src/style/pages/_place.scss b/src/style/pages/_place.scss index f82b4b5..7d508a9 100644 --- a/src/style/pages/_place.scss +++ b/src/style/pages/_place.scss @@ -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); + } } }