WIP attempt to fix page transitions, Several edits
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -51,12 +51,12 @@
|
||||
"postcss": "^7.0.27",
|
||||
"postcss-load-config": "^2.1.0",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"rollup": "^2.3.1",
|
||||
"rollup": "^2.3.2",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-eslint": "^7.0.0",
|
||||
"rollup-plugin-svelte": "^5.2.0",
|
||||
"rollup-plugin-terser": "^5.3.0",
|
||||
"sapper": "^0.27.11",
|
||||
"sapper": "^0.27.12",
|
||||
"svelte": "^3.20.1",
|
||||
"svelte-preprocess": "^3.7.1"
|
||||
},
|
||||
|
||||
68
pnpm-lock.yaml
generated
68
pnpm-lock.yaml
generated
@@ -15,10 +15,10 @@ devDependencies:
|
||||
'@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
|
||||
'@babel/preset-env': 7.9.0_@babel+core@7.9.0
|
||||
'@babel/runtime': 7.9.2
|
||||
'@rollup/plugin-alias': 3.0.1_rollup@2.3.1
|
||||
'@rollup/plugin-commonjs': 11.0.2_rollup@2.3.1
|
||||
'@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.1
|
||||
'@rollup/plugin-replace': 2.3.1_rollup@2.3.1
|
||||
'@rollup/plugin-alias': 3.0.1_rollup@2.3.2
|
||||
'@rollup/plugin-commonjs': 11.0.2_rollup@2.3.2
|
||||
'@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.2
|
||||
'@rollup/plugin-replace': 2.3.1_rollup@2.3.2
|
||||
autoprefixer: 9.7.5
|
||||
babel-plugin-module-resolver: 4.0.0
|
||||
dotenv: 8.2.0
|
||||
@@ -33,12 +33,12 @@ devDependencies:
|
||||
postcss: 7.0.27
|
||||
postcss-load-config: 2.1.0
|
||||
postcss-preset-env: 6.7.0
|
||||
rollup: 2.3.1
|
||||
rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.1
|
||||
rollup: 2.3.2
|
||||
rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.2
|
||||
rollup-plugin-eslint: 7.0.0
|
||||
rollup-plugin-svelte: 5.2.0_rollup@2.3.1+svelte@3.20.1
|
||||
rollup-plugin-terser: 5.3.0_rollup@2.3.1
|
||||
sapper: 0.27.11_svelte@3.20.1
|
||||
rollup-plugin-svelte: 5.2.0_rollup@2.3.2+svelte@3.20.1
|
||||
rollup-plugin-terser: 5.3.0_rollup@2.3.2
|
||||
sapper: 0.27.12_svelte@3.20.1
|
||||
svelte: 3.20.1
|
||||
svelte-preprocess: 3.7.1_svelte@3.20.1
|
||||
lockfileVersion: 5.1
|
||||
@@ -892,23 +892,23 @@ packages:
|
||||
dev: false
|
||||
resolution:
|
||||
integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
|
||||
/@rollup/plugin-alias/3.0.1_rollup@2.3.1:
|
||||
/@rollup/plugin-alias/3.0.1_rollup@2.3.2:
|
||||
dependencies:
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
slash: 3.0.0
|
||||
dev: true
|
||||
peerDependencies:
|
||||
rollup: ^1.20.0
|
||||
resolution:
|
||||
integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g==
|
||||
/@rollup/plugin-commonjs/11.0.2_rollup@2.3.1:
|
||||
/@rollup/plugin-commonjs/11.0.2_rollup@2.3.2:
|
||||
dependencies:
|
||||
'@rollup/pluginutils': 3.0.8_rollup@2.3.1
|
||||
'@rollup/pluginutils': 3.0.8_rollup@2.3.2
|
||||
estree-walker: 1.0.1
|
||||
is-reference: 1.1.4
|
||||
magic-string: 0.25.7
|
||||
resolve: 1.15.1
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
dev: true
|
||||
engines:
|
||||
node: '>= 8.0.0'
|
||||
@@ -916,14 +916,14 @@ packages:
|
||||
rollup: ^1.20.0
|
||||
resolution:
|
||||
integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
|
||||
/@rollup/plugin-node-resolve/7.1.1_rollup@2.3.1:
|
||||
/@rollup/plugin-node-resolve/7.1.1_rollup@2.3.2:
|
||||
dependencies:
|
||||
'@rollup/pluginutils': 3.0.8_rollup@2.3.1
|
||||
'@rollup/pluginutils': 3.0.8_rollup@2.3.2
|
||||
'@types/resolve': 0.0.8
|
||||
builtin-modules: 3.1.0
|
||||
is-module: 1.0.0
|
||||
resolve: 1.15.1
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
dev: true
|
||||
engines:
|
||||
node: '>= 8.0.0'
|
||||
@@ -931,20 +931,20 @@ packages:
|
||||
rollup: ^1.20.0
|
||||
resolution:
|
||||
integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==
|
||||
/@rollup/plugin-replace/2.3.1_rollup@2.3.1:
|
||||
/@rollup/plugin-replace/2.3.1_rollup@2.3.2:
|
||||
dependencies:
|
||||
'@rollup/pluginutils': 3.0.8_rollup@2.3.1
|
||||
'@rollup/pluginutils': 3.0.8_rollup@2.3.2
|
||||
magic-string: 0.25.7
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
dev: true
|
||||
peerDependencies:
|
||||
rollup: ^1.20.0
|
||||
resolution:
|
||||
integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A==
|
||||
/@rollup/pluginutils/3.0.8_rollup@2.3.1:
|
||||
/@rollup/pluginutils/3.0.8_rollup@2.3.2:
|
||||
dependencies:
|
||||
estree-walker: 1.0.1
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
dev: true
|
||||
engines:
|
||||
node: '>= 8.0.0'
|
||||
@@ -3792,11 +3792,11 @@ packages:
|
||||
hasBin: true
|
||||
resolution:
|
||||
integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
|
||||
/rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.1:
|
||||
/rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.2:
|
||||
dependencies:
|
||||
'@babel/core': 7.9.0
|
||||
'@babel/helper-module-imports': 7.8.3
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
rollup-pluginutils: 2.8.2
|
||||
dev: true
|
||||
peerDependencies:
|
||||
@@ -3811,10 +3811,10 @@ packages:
|
||||
dev: true
|
||||
resolution:
|
||||
integrity: sha512-u35kXiY11ULeNQGTlRkYx7uGJ/hS/Dx3wj8f9YVC3oMLTGU9fOqQJsAKYtBFZU3gJ8Vt3gu8ppB1vnKl+7gatQ==
|
||||
/rollup-plugin-svelte/5.2.0_rollup@2.3.1+svelte@3.20.1:
|
||||
/rollup-plugin-svelte/5.2.0_rollup@2.3.2+svelte@3.20.1:
|
||||
dependencies:
|
||||
require-relative: 0.8.7
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
rollup-pluginutils: 2.8.2
|
||||
sourcemap-codec: 1.4.8
|
||||
svelte: 3.20.1
|
||||
@@ -3824,11 +3824,11 @@ packages:
|
||||
svelte: '*'
|
||||
resolution:
|
||||
integrity: sha512-6B7gRsJC/rS/ATEy3J51McsNgNcDFibRQ/L3rHsDMUYeCDCm3dsw3KEqf3WaxX0ZdApzZ1XWcnTXGQlwVPYpnQ==
|
||||
/rollup-plugin-terser/5.3.0_rollup@2.3.1:
|
||||
/rollup-plugin-terser/5.3.0_rollup@2.3.2:
|
||||
dependencies:
|
||||
'@babel/code-frame': 7.8.3
|
||||
jest-worker: 24.9.0
|
||||
rollup: 2.3.1
|
||||
rollup: 2.3.2
|
||||
rollup-pluginutils: 2.8.2
|
||||
serialize-javascript: 2.1.2
|
||||
terser: 4.6.7
|
||||
@@ -3843,7 +3843,7 @@ packages:
|
||||
dev: true
|
||||
resolution:
|
||||
integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
|
||||
/rollup/2.3.1:
|
||||
/rollup/2.3.2:
|
||||
dev: true
|
||||
engines:
|
||||
node: '>=10.0.0'
|
||||
@@ -3851,7 +3851,7 @@ packages:
|
||||
optionalDependencies:
|
||||
fsevents: 2.1.2
|
||||
resolution:
|
||||
integrity: sha512-BRjzOauORe+R0U0I6SkMTSG22nYmtztR/TaBl0SvbXgc3VAxBDrZoB6HROiK0S5px1pUBnLnjBkbzmVuwC9Q1Q==
|
||||
integrity: sha512-p66+fbfaUUOGE84sHXAOgfeaYQMslgAazoQMp//nlR519R61213EPFgrMZa48j31jNacJwexSAR1Q8V/BwGKBA==
|
||||
/run-async/2.4.0:
|
||||
dependencies:
|
||||
is-promise: 2.1.0
|
||||
@@ -3879,7 +3879,7 @@ packages:
|
||||
dev: true
|
||||
resolution:
|
||||
integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
|
||||
/sapper/0.27.11_svelte@3.20.1:
|
||||
/sapper/0.27.12_svelte@3.20.1:
|
||||
dependencies:
|
||||
html-minifier: 4.0.0
|
||||
http-link-header: 1.0.2
|
||||
@@ -3892,7 +3892,7 @@ packages:
|
||||
peerDependencies:
|
||||
svelte: ^3.5.0
|
||||
resolution:
|
||||
integrity: sha512-5EaPZhlc8OnyN3UCI6dRSM1Gz5sxyzLZG/1z5nMvZhg9Ng+rSvEvJx/rW/tSHcnQPa8or7+YcbfvQHKS5oPHiw==
|
||||
integrity: sha512-xTvPQMb9L3J34Jd+6jSFeiuT8eQZ2D5TXPeJI9VO7h8t5nB2w78ZNQ4IlEPHsCMT2LZNLozygTb2plE4qH2XeQ==
|
||||
/sass-graph/2.2.4:
|
||||
dependencies:
|
||||
glob: 7.1.6
|
||||
@@ -4555,12 +4555,12 @@ specifiers:
|
||||
postcss: ^7.0.27
|
||||
postcss-load-config: ^2.1.0
|
||||
postcss-preset-env: ^6.7.0
|
||||
rollup: ^2.3.1
|
||||
rollup: ^2.3.2
|
||||
rollup-plugin-babel: ^4.4.0
|
||||
rollup-plugin-eslint: ^7.0.0
|
||||
rollup-plugin-svelte: ^5.2.0
|
||||
rollup-plugin-terser: ^5.3.0
|
||||
sapper: ^0.27.11
|
||||
sapper: ^0.27.12
|
||||
scroll-out: ^2.2.8
|
||||
sirv: ^0.4.2
|
||||
svelte: ^3.20.1
|
||||
|
||||
@@ -1,56 +1,39 @@
|
||||
import anime from 'animejs'
|
||||
import ScrollOut from 'scroll-out'
|
||||
// import { animDuration } from 'utils/store'
|
||||
import { transitionNormal, transitionDelay } from 'utils/store'
|
||||
|
||||
|
||||
/*
|
||||
** Transition In
|
||||
*/
|
||||
export const animateIn = scope => {
|
||||
// Card: Active
|
||||
const cardActive = ScrollOut({
|
||||
once: true,
|
||||
targets: scope.querySelector('.gallery__photo--active'),
|
||||
onShown (el) {
|
||||
anime({
|
||||
targets: el,
|
||||
top: [32, 0],
|
||||
duration: 1200,
|
||||
delay: 650,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
// Timeline
|
||||
const tl = anime.timeline({
|
||||
easing: 'easeOutQuart',
|
||||
duration: transitionNormal,
|
||||
delay: transitionDelay
|
||||
})
|
||||
// Photo: Active
|
||||
tl.add({
|
||||
targets: scope.querySelector('.is-active picture'),
|
||||
translateY: [32, 0]
|
||||
}, 400)
|
||||
// Photo: Prev
|
||||
tl.add({
|
||||
targets: scope.querySelector('.is-prev picture'),
|
||||
translateY: [8, 0],
|
||||
translateX: [64, 0]
|
||||
}, 550)
|
||||
// Photo: Next
|
||||
tl.add({
|
||||
targets: scope.querySelector('.is-next picture'),
|
||||
translateY: [8, 0],
|
||||
translateX: [-48, 0]
|
||||
}, 550)
|
||||
|
||||
// Card: Prev
|
||||
const cardPrev = ScrollOut({
|
||||
const carouselIn = ScrollOut({
|
||||
once: true,
|
||||
targets: scope.querySelector('.gallery__photo--prev'),
|
||||
onShown (el) {
|
||||
anime({
|
||||
targets: el,
|
||||
top: [5, 0],
|
||||
left: [-64, 0],
|
||||
duration: 1200,
|
||||
delay: 690,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Card: Prev
|
||||
const cardNext = ScrollOut({
|
||||
once: true,
|
||||
targets: scope.querySelector('.gallery__photo--next'),
|
||||
onShown (el) {
|
||||
anime({
|
||||
targets: el,
|
||||
top: [5, 0],
|
||||
left: [48, 0],
|
||||
duration: 1200,
|
||||
delay: 710,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
targets: scope,
|
||||
onShown: () => tl.restart()
|
||||
})
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import anime from 'animejs'
|
||||
import ScrollOut from 'scroll-out'
|
||||
import { animDuration } from 'utils/store'
|
||||
import { transitionLong } from 'utils/store'
|
||||
|
||||
|
||||
/*
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import anime from 'animejs'
|
||||
import ScrollOut from 'scroll-out'
|
||||
import { animDuration } from 'utils/store'
|
||||
import { transitionDelay } from 'utils/store'
|
||||
|
||||
|
||||
/*
|
||||
** Transition In
|
||||
*/
|
||||
export const animateIn = scope => {
|
||||
export const animateIn = (scope, init) => {
|
||||
// On scroll animation
|
||||
const title = ScrollOut({
|
||||
once: true,
|
||||
@@ -16,16 +16,16 @@ export const animateIn = scope => {
|
||||
anime({
|
||||
targets: el.querySelectorAll('span'),
|
||||
translateY: ['100%', 0],
|
||||
delay: anime.stagger(40),
|
||||
duration: 1000,
|
||||
easing: 'easeOutQuart'
|
||||
easing: 'easeOutQuart',
|
||||
delay: anime.stagger(40, { start: init ? 0 : transitionDelay }),
|
||||
duration: 1000
|
||||
})
|
||||
|
||||
// Word in between
|
||||
anime({
|
||||
targets: el.querySelectorAll('em span'),
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(80, { start: 400 }),
|
||||
delay: anime.stagger(80, { start: (init ? 0 : transitionDelay) + 400 }),
|
||||
duration: 1000,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
|
||||
@@ -1,32 +1,34 @@
|
||||
import anime from 'animejs'
|
||||
import { animDuration, animDurationLong } from 'utils/store'
|
||||
import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'
|
||||
|
||||
|
||||
/*
|
||||
** Transition In
|
||||
*/
|
||||
export const animateIn = scope => {
|
||||
// Panel itself
|
||||
const transition = anime({
|
||||
targets: scope.querySelector('.transition__background'),
|
||||
scaleY: [1, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 400,
|
||||
const tl = anime.timeline({
|
||||
duration: transitionPanelIn,
|
||||
easing: 'easeInOutQuart',
|
||||
begin () {
|
||||
begin: () => {
|
||||
// Show the panel
|
||||
scope.classList.remove('hidden')
|
||||
}
|
||||
})
|
||||
|
||||
// Panel itself
|
||||
tl.add({
|
||||
targets: scope.querySelector('.transition__background'),
|
||||
scaleY: [1, 1],
|
||||
opacity: [0, 1],
|
||||
duration: transitionPanelIn
|
||||
}, 0)
|
||||
// Globe icon
|
||||
const globe = anime({
|
||||
tl.add({
|
||||
targets: scope.querySelector('svg'),
|
||||
opacity: [0, 1],
|
||||
translateY: ['16px', 0],
|
||||
duration: 400,
|
||||
easing: 'easeInOutQuart'
|
||||
})
|
||||
|
||||
translateY: ['3vh', 0],
|
||||
duration: transitionPanelIn
|
||||
}, 0)
|
||||
}
|
||||
|
||||
|
||||
@@ -34,14 +36,9 @@ export const animateIn = scope => {
|
||||
** Transition Out
|
||||
*/
|
||||
export const animateOut = (scope, callback) => {
|
||||
// Background
|
||||
const background = anime({
|
||||
targets: scope.querySelector('.transition__background'),
|
||||
scaleY: [1, 0],
|
||||
duration: animDurationLong,
|
||||
delay: 800,
|
||||
const tl = anime.timeline({
|
||||
easing: 'easeInOutQuart',
|
||||
complete () {
|
||||
complete: () => {
|
||||
// Hide the panel
|
||||
scope.classList.add('hidden')
|
||||
|
||||
@@ -50,23 +47,29 @@ export const animateOut = (scope, callback) => {
|
||||
}
|
||||
})
|
||||
|
||||
// Background
|
||||
tl.add({
|
||||
targets: scope.querySelector('.transition__background'),
|
||||
scaleY: [1, 0],
|
||||
duration: transitionLong
|
||||
}, 600)
|
||||
|
||||
// Title
|
||||
const title = anime({
|
||||
tl.add({
|
||||
targets: scope.querySelector('.title-location'),
|
||||
opacity: [1, 0],
|
||||
translateY: [0, '-50vh'],
|
||||
duration: animDuration,
|
||||
delay: 1000,
|
||||
easing: 'easeInOutQuart'
|
||||
})
|
||||
duration: transitionNormal
|
||||
}, 850)
|
||||
|
||||
// Globe icon
|
||||
const globe = anime({
|
||||
tl.add({
|
||||
targets: scope.querySelector('svg'),
|
||||
opacity: [1, 0],
|
||||
translateY: [0, '-50vh'],
|
||||
duration: animDuration,
|
||||
delay: 1000,
|
||||
easing: 'easeInOutQuart'
|
||||
})
|
||||
duration: transitionNormal
|
||||
}, 850)
|
||||
|
||||
// Play
|
||||
tl.play()
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import anime from 'animejs'
|
||||
import ScrollOut from 'scroll-out'
|
||||
import { animDuration } from 'utils/store'
|
||||
import { transitionNormal, transitionLong, transitionDelay } from 'utils/store'
|
||||
import { throttle, parallaxAnime } from 'utils/functions'
|
||||
|
||||
|
||||
@@ -9,67 +9,65 @@ import { throttle, parallaxAnime } from 'utils/functions'
|
||||
*/
|
||||
export const animateIn = () => {
|
||||
// Title: Houses
|
||||
const titleHouses = ScrollOut({
|
||||
once: true,
|
||||
targets: '#title-houses',
|
||||
onShown (el) {
|
||||
// const titleHouses = ScrollOut({
|
||||
// once: true,
|
||||
// targets: '#title-houses',
|
||||
// onShown (el) {
|
||||
// Reveal each letter
|
||||
anime({
|
||||
targets: el.querySelectorAll('span'),
|
||||
targets: document.querySelectorAll('#title-houses span'),
|
||||
translateY: ['-70%', 0],
|
||||
delay: anime.stagger(80),
|
||||
duration: animDuration,
|
||||
delay: anime.stagger(80, { start: transitionDelay }),
|
||||
duration: transitionNormal,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
|
||||
// Parallax on scroll
|
||||
const translate = anime({
|
||||
targets: el,
|
||||
targets: '#title-houses',
|
||||
translateX: ['7%', '-15%'],
|
||||
easing: 'linear',
|
||||
autoplay: false,
|
||||
duration: animDuration
|
||||
})
|
||||
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
|
||||
setTimeout(() => parallaxAnime(el, translate), 50)
|
||||
},
|
||||
onHidden () {
|
||||
window.removeEventListener('scroll', parallaxAnime)
|
||||
}
|
||||
duration: transitionNormal
|
||||
})
|
||||
window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
|
||||
setTimeout(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
|
||||
// },
|
||||
// onHidden: () => window.removeEventListener('scroll', parallaxAnime)
|
||||
// })
|
||||
|
||||
// Intro: Description
|
||||
const introDescription = ScrollOut({
|
||||
once: true,
|
||||
targets: '#intro-description',
|
||||
onShown (el) {
|
||||
// const introDescription = ScrollOut({
|
||||
// once: true,
|
||||
// targets: '#intro-description',
|
||||
// onShown (el) {
|
||||
anime({
|
||||
targets: el.querySelectorAll('p, a'),
|
||||
targets: '#intro-description p, #intro-description a',
|
||||
opacity: [0, 1],
|
||||
translateY: [8, 0],
|
||||
duration: animDuration,
|
||||
delay: anime.stagger(200, { start: 400 }),
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
easing: 'easeOutQuart',
|
||||
duration: transitionNormal,
|
||||
delay: anime.stagger(200, { start: transitionDelay + 400 })
|
||||
})
|
||||
// }
|
||||
// })
|
||||
|
||||
// Intro: Carousel
|
||||
const introCarousel = ScrollOut({
|
||||
once: true,
|
||||
targets: '#intro-carousel',
|
||||
onShown (el) {
|
||||
// const introCarousel = ScrollOut({
|
||||
// once: true,
|
||||
// targets: '#intro-carousel',
|
||||
// onShown (el) {
|
||||
anime({
|
||||
targets: el,
|
||||
targets: '#intro-carousel',
|
||||
opacity: [0, 1],
|
||||
translateY: [24, 0],
|
||||
duration: animDuration,
|
||||
delay: 650,
|
||||
easing: 'easeOutQuart',
|
||||
complete: () => el.removeAttribute('style')
|
||||
})
|
||||
}
|
||||
duration: transitionNormal,
|
||||
delay: transitionDelay + 600,
|
||||
complete: event => event.animatables[0].target.removeAttribute('style')
|
||||
})
|
||||
// }
|
||||
// })
|
||||
|
||||
// Title: Of
|
||||
const titleOf = ScrollOut({
|
||||
@@ -79,9 +77,9 @@ export const animateIn = () => {
|
||||
anime({
|
||||
targets: el.querySelectorAll('span'),
|
||||
translateY: ['100%', 0],
|
||||
easing: 'easeOutQuart',
|
||||
delay: anime.stagger(70),
|
||||
duration: animDuration,
|
||||
easing: 'easeOutQuart'
|
||||
duration: transitionNormal
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -94,9 +92,9 @@ export const animateIn = () => {
|
||||
anime({
|
||||
targets: el.querySelectorAll('span'),
|
||||
translateY: ['100%', 0],
|
||||
easing: 'easeOutQuart',
|
||||
delay: anime.stagger(70),
|
||||
duration: animDuration,
|
||||
easing: 'easeOutQuart'
|
||||
duration: transitionNormal
|
||||
})
|
||||
|
||||
// Parallax on scroll
|
||||
@@ -105,14 +103,27 @@ export const animateIn = () => {
|
||||
translateX: ['5%', '-3%'],
|
||||
easing: 'linear',
|
||||
autoplay: false,
|
||||
duration: animDuration
|
||||
duration: transitionNormal
|
||||
})
|
||||
|
||||
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
|
||||
setTimeout(() => parallaxAnime(el, translate), 50)
|
||||
},
|
||||
onHidden() {
|
||||
window.removeEventListener('scroll', parallaxAnime)
|
||||
}
|
||||
onHidden: () => window.removeEventListener('scroll', parallaxAnime)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** Transition Out
|
||||
*/
|
||||
export const animateOut = () => {
|
||||
anime({
|
||||
targets: document.querySelector('#title-houses'),
|
||||
translateY: ['-70%', 0],
|
||||
opacity: [1, 0],
|
||||
duration: transitionNormal,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import anime from 'animejs'
|
||||
import ScrollOut from 'scroll-out'
|
||||
import { animDuration, animDurationLong } from 'utils/store'
|
||||
import { transitionNormal, transitionDelay } from 'utils/store'
|
||||
|
||||
|
||||
/*
|
||||
** Transition In
|
||||
*/
|
||||
export const animateIn = () => {
|
||||
// Simple fade
|
||||
const page = ScrollOut({
|
||||
once: true,
|
||||
targets: '.page',
|
||||
onShown (el) {
|
||||
// Simple slide and fade on each part of the page
|
||||
// const page = ScrollOut({
|
||||
// once: true,
|
||||
// targets: '.page',
|
||||
// onShown (el) {
|
||||
anime({
|
||||
targets: '.page__part',
|
||||
targets: document.querySelectorAll('.page__part'),
|
||||
opacity: [0, 1],
|
||||
translateY: [8, 0],
|
||||
duration: 1800,
|
||||
delay: anime.stagger(220, { start: animDurationLong * 0.3 }),
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
}
|
||||
easing: 'easeOutQuart',
|
||||
duration: transitionNormal,
|
||||
delay: anime.stagger(220, { start: transitionDelay }),
|
||||
})
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import anime from 'animejs'
|
||||
// import ScrollOut from 'scroll-out'
|
||||
import { animDuration } from 'utils/store'
|
||||
import { transitionNormal, transitionDelay } from 'utils/store'
|
||||
|
||||
|
||||
/*
|
||||
@@ -9,7 +9,7 @@ import { animDuration } from 'utils/store'
|
||||
export const animateIn = () => {
|
||||
const tl = anime.timeline({
|
||||
duration: 1800,
|
||||
delay: 1800,
|
||||
delay: transitionDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
|
||||
@@ -17,27 +17,27 @@ export const animateIn = () => {
|
||||
tl.add({
|
||||
targets: '.place__title_houses',
|
||||
translateY: ['150%', 0],
|
||||
duration: animDuration
|
||||
})
|
||||
duration: transitionNormal
|
||||
}, 200)
|
||||
// Title: Of
|
||||
tl.add({
|
||||
targets: '.place__title_of',
|
||||
opacity: [0, 1],
|
||||
duration: 800
|
||||
}, 550)
|
||||
duration: transitionNormal
|
||||
}, 800)
|
||||
// Title: Place name
|
||||
tl.add({
|
||||
targets: '.place__title_name',
|
||||
translateY: ['150%', 0],
|
||||
duration: animDuration
|
||||
}, 200)
|
||||
duration: transitionNormal
|
||||
}, 350)
|
||||
|
||||
// Switcher link
|
||||
tl.add({
|
||||
targets: '.place__title .button-control',
|
||||
scale: [0.95, 1],
|
||||
opacity: [0, 1],
|
||||
duration: animDuration
|
||||
duration: transitionNormal
|
||||
}, 700)
|
||||
|
||||
// Illustration
|
||||
@@ -45,7 +45,7 @@ export const animateIn = () => {
|
||||
targets: '.place__illustration',
|
||||
scale: [1.075, 1],
|
||||
opacity: [0, 1],
|
||||
duration: animDuration
|
||||
duration: transitionNormal
|
||||
}, 200)
|
||||
|
||||
// Description
|
||||
@@ -53,8 +53,8 @@ export const animateIn = () => {
|
||||
targets: '.place__description',
|
||||
opacity: [0, 1],
|
||||
translateY: [24, 0],
|
||||
duration: animDuration
|
||||
}, 800)
|
||||
duration: transitionNormal
|
||||
}, 650)
|
||||
|
||||
// Play
|
||||
tl.play()
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import anime from 'animejs'
|
||||
import { animDuration } from 'utils/store'
|
||||
import { transitionNormal } from 'utils/store'
|
||||
|
||||
|
||||
/*
|
||||
@@ -10,7 +10,7 @@ export const animateIn = () => {
|
||||
anime({
|
||||
targets: '.viewer__top p, .viewer__top .buttons a',
|
||||
translateY: [-32, 0],
|
||||
duration: animDuration,
|
||||
duration: transitionNormal,
|
||||
delay: anime.stagger(150, { start: 600 }),
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
@@ -20,7 +20,7 @@ export const animateIn = () => {
|
||||
targets: '.viewer .carousel',
|
||||
opacity: [0, 1],
|
||||
translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
|
||||
duration: animDuration,
|
||||
duration: transitionNormal,
|
||||
delay: 300,
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
@@ -30,7 +30,7 @@ export const animateIn = () => {
|
||||
targets: '.viewer .carousel__number_column',
|
||||
opacity: [0, 1],
|
||||
marginTop: [24, 0],
|
||||
duration: animDuration,
|
||||
duration: transitionNormal,
|
||||
delay: anime.stagger(100, { start: 450 }),
|
||||
easing: 'easeOutQuart'
|
||||
})
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width={width} viewBox="0 0 56 75"
|
||||
fill={color}
|
||||
class="icon-globe" class:icon-svg--animated={animated}
|
||||
class="icon-svg icon-globe" class:is-animated={animated}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id={randomId}>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width={width} viewBox="0 0 56 56"
|
||||
fill={color}
|
||||
class="icon-globe icon-globe--small" class:icon-svg--animated={animated}
|
||||
class="icon-svg icon-globe icon-globe--small" class:is-animated={animated}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id={randomId}>
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
// Animations
|
||||
import { animateIn } from 'animations/TitleSite'
|
||||
|
||||
// Variables
|
||||
// Props and variables
|
||||
export let init = false
|
||||
let scope
|
||||
let mounted = false
|
||||
|
||||
@@ -14,8 +15,8 @@
|
||||
** Run code on component mount
|
||||
*/
|
||||
onMount(() => {
|
||||
animateIn(scope, init)
|
||||
mounted = true
|
||||
animateIn(scope)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
// Hover on controls
|
||||
const hoverPhoto = event => {
|
||||
const button = event.currentTarget.querySelector('button')
|
||||
const photoActive = scope.querySelector('.gallery__photo--active')
|
||||
const photoActive = scope.querySelector('.is-active')
|
||||
|
||||
let photoToHover
|
||||
if (event.currentTarget.dataset.to === 'prev') {
|
||||
@@ -114,7 +114,7 @@
|
||||
*/
|
||||
onMount(() => {
|
||||
// Entering transition
|
||||
if (photos.length) {
|
||||
if (photos) {
|
||||
animateIn(scope)
|
||||
}
|
||||
|
||||
@@ -134,7 +134,7 @@
|
||||
|
||||
<svelte:window on:keydown={keyboardNav} />
|
||||
|
||||
{#if photos.length}
|
||||
{#if photos}
|
||||
<div class="carousel"
|
||||
bind:this={scope}
|
||||
on:swipe={event => swipe(event.detail.directions)}
|
||||
@@ -143,18 +143,20 @@
|
||||
<div class="gallery">
|
||||
<div class="gallery__images">
|
||||
{#each photos as { id, name, location, image }, index}
|
||||
<picture class="gallery__photo"
|
||||
class:gallery__photo--prev={id === prevPhoto.id}
|
||||
class:gallery__photo--active={id === currentPhoto.id}
|
||||
class:gallery__photo--next={id === nextPhoto.id}
|
||||
<div class="gallery__photo"
|
||||
class:is-prev={id === prevPhoto.id}
|
||||
class:is-active={id === currentPhoto.id}
|
||||
class:is-next={id === nextPhoto.id}
|
||||
on:click={openFullscreen}
|
||||
>
|
||||
<picture class="gallery__picture">
|
||||
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
|
||||
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
|
||||
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
|
||||
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
|
||||
<img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
|
||||
</picture>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -189,9 +191,9 @@
|
||||
<div class="carousel__locations">
|
||||
{#each photos as { id, name, location }, index}
|
||||
<div class="carousel__location style-location"
|
||||
class:carousel__location--prev={id === prevPhoto.id}
|
||||
class:carousel__location--active={id === currentPhoto.id}
|
||||
class:carousel__location--next={id === nextPhoto.id}
|
||||
class:is-prev={id === prevPhoto.id}
|
||||
class:is-active={id === currentPhoto.id}
|
||||
class:is-next={id === nextPhoto.id}
|
||||
>
|
||||
<p class="street">{name}</p>
|
||||
<p class="state style-caps style-caps--transparent">
|
||||
|
||||
@@ -70,7 +70,8 @@
|
||||
site,
|
||||
continents,
|
||||
countries,
|
||||
locations
|
||||
locations,
|
||||
pageReady
|
||||
} from 'utils/store'
|
||||
|
||||
// Components
|
||||
@@ -106,7 +107,9 @@
|
||||
<link rel="canonical" href={`https://${$page.host}${$page.path}`} />
|
||||
</svelte:head>
|
||||
|
||||
<main class="housesof" style="opacity: { $pageReady ? 1 : 0}">
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
||||
{#if process.env.CONFIG.TRANSITION === 'true'}
|
||||
<Transition />
|
||||
|
||||
@@ -75,9 +75,9 @@
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<InteractiveGlobe type="part" />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</section>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { onMount, onDestroy } from 'svelte'
|
||||
import { stores } from '@sapper/app'
|
||||
import {
|
||||
apiEndpoints,
|
||||
@@ -56,7 +56,7 @@
|
||||
pageTransition.onAnimationEnd = animateIn
|
||||
|
||||
// Props and variables
|
||||
export let photos
|
||||
export let photos = ''
|
||||
const { page } = stores()
|
||||
|
||||
// Reset current location if existing
|
||||
@@ -106,9 +106,10 @@
|
||||
</div>
|
||||
|
||||
<div id="intro-carousel">
|
||||
{#if photos}
|
||||
<Carousel {photos} />
|
||||
|
||||
<Fullscreen />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
// Load photos
|
||||
const fields = [
|
||||
'id', 'name', 'slug', 'date', 'image.private_hash',
|
||||
'location.id', 'location.name', 'location.slug', 'location.region', 'location.country.name', 'location.country.slug',
|
||||
'location.id', 'location.name', 'location.slug', 'location.region',
|
||||
'location.country.name', 'location.country.slug',
|
||||
'created_on', 'modified_on'
|
||||
].join(',')
|
||||
const sort = ['-created_on', 'name'].join(',')
|
||||
@@ -58,6 +59,7 @@
|
||||
|
||||
// Update current location
|
||||
const location = $locations.find(loc => loc.slug === $page.params.place)
|
||||
const { description, country, illustration_desktop, illustration_mobile } = location
|
||||
currentLocation.set(location)
|
||||
currentPhotos.set(photos)
|
||||
|
||||
@@ -96,12 +98,12 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}</title>
|
||||
<meta name="description" content="{$site.seo_name} {location.name} {location.description}">
|
||||
<title>{$site.seo_name} – Beautiful houses of {location.name}, {country.name}</title>
|
||||
<meta name="description" content="{$site.seo_name} {location.name} {description}">
|
||||
<SocialMetas
|
||||
url="https://{$page.host}/location/{location.country.slug}/{location.slug}"
|
||||
title="{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}"
|
||||
description="{$site.seo_name} {location.name} {location.description}"
|
||||
url="https://{$page.host}/location/{country.slug}/{location.slug}"
|
||||
title="{$site.seo_name} – Beautiful houses of {location.name}, {country.name}"
|
||||
description="{$site.seo_name} {location.name} {description}"
|
||||
image={latestPhoto ? getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
|
||||
/>
|
||||
</svelte:head>
|
||||
@@ -135,17 +137,17 @@
|
||||
<div class="wrapper">
|
||||
<p>{$site.description}</p>
|
||||
|
||||
{#if location.description}
|
||||
{#if description}
|
||||
<p>
|
||||
Houses Of
|
||||
<LinkChange href="/choose" text={location.name} noScroll="true">
|
||||
<IconGlobeSmall width="14" color="#999" />
|
||||
</LinkChange>
|
||||
{location.description}
|
||||
{description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if photos.length}
|
||||
{#if photos}
|
||||
<p class="updated style-caps">
|
||||
<strong>Updated</strong>
|
||||
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
|
||||
@@ -157,9 +159,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if location.illustration_desktop && location.illustration_mobile}
|
||||
{#if illustration_desktop && illustration_mobile}
|
||||
<div class="place__illustration"
|
||||
style="--url-desktop: url({location.illustration_desktop.full_url}); --url-mobile: url({location.illustration_mobile.full_url});"
|
||||
style="--url-desktop: url({illustration_desktop.full_url}); --url-mobile: url({illustration_mobile.full_url});"
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
@@ -169,7 +171,7 @@
|
||||
<aside class="photos__side">
|
||||
<Switcher type="switcher--side" />
|
||||
|
||||
{#if photos.length}
|
||||
{#if photos}
|
||||
<p class="updated style-caps">
|
||||
<strong>Updated</strong>
|
||||
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
|
||||
@@ -178,7 +180,7 @@
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{#if photos.length}
|
||||
{#if photos}
|
||||
<div class="photos__view wrap">
|
||||
{#each paginatedPhotos as photo, index}
|
||||
<Photo
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
background-color: $color-secondary;
|
||||
|
||||
svg {
|
||||
fill: #fff !important;
|
||||
fill: #fff;
|
||||
}
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
// Animate by default
|
||||
&--animated {
|
||||
&.is-animated {
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
5
src/style/layouts/_main.scss
Normal file
5
src/style/layouts/_main.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// Main page
|
||||
.housesof {
|
||||
transition: opacity 0.4s $ease-quart;
|
||||
will-change: opacity;
|
||||
}
|
||||
@@ -1,6 +1,11 @@
|
||||
// Carousel
|
||||
.carousel {
|
||||
background-color: $color-primary;
|
||||
overflow: hidden;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 1280px;
|
||||
@@ -52,7 +57,6 @@
|
||||
&__photo {
|
||||
$duration: 1s;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
@@ -60,21 +64,78 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale($scale);
|
||||
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
|
||||
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
|
||||
will-change: transform, opacity, top, left;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
// Active photo
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
transform: scale(1);
|
||||
|
||||
img {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous & next photo
|
||||
&.is-prev, &.is-next {
|
||||
opacity: 1;
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
picture:before {
|
||||
@include breakpoint (sm) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Previous photo
|
||||
&.is-prev {
|
||||
z-index: 9;
|
||||
transform: translate(-40%, 0) scale(0.85);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
z-index: 8;
|
||||
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
|
||||
}
|
||||
}
|
||||
|
||||
// Next photo
|
||||
&.is-next {
|
||||
z-index: 8;
|
||||
transform: translate(40%, 0) scale(0.85);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
z-index: 9;
|
||||
transform: translate($distance, -1%) rotate($angle) scale($scale);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Picture
|
||||
&__picture {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
@@ -91,62 +152,13 @@
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
// Active photo
|
||||
&--active {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
transform: scale(1);
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous & next photo
|
||||
&--prev, &--next {
|
||||
opacity: 1;
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include breakpoint (sm) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Previous photo
|
||||
&--prev {
|
||||
z-index: 9;
|
||||
transform: translate(-40%, 0) scale(0.85);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
z-index: 8;
|
||||
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
|
||||
}
|
||||
}
|
||||
|
||||
// Next photo
|
||||
&--next {
|
||||
z-index: 8;
|
||||
transform: translate(40%, 0) scale(0.85);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
z-index: 9;
|
||||
transform: translate($distance, -1%) rotate($angle) scale($scale);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
|
||||
}
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -193,7 +205,7 @@
|
||||
|
||||
|
||||
/*
|
||||
** Information
|
||||
** Informations
|
||||
*/
|
||||
&__infos {
|
||||
position: relative;
|
||||
@@ -232,14 +244,14 @@
|
||||
}
|
||||
|
||||
// States
|
||||
&--prev {
|
||||
&.is-prev {
|
||||
transform: translateY(-$distance);
|
||||
}
|
||||
&--active {
|
||||
&.is-active {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
&--next {
|
||||
&.is-next {
|
||||
transform: translateY($distance);
|
||||
}
|
||||
|
||||
@@ -312,44 +324,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Zoomer
|
||||
*/
|
||||
.zoomer {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Image
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
.button-control {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
li {
|
||||
@@ -49,6 +50,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
margin-top: 3px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 0;
|
||||
@@ -56,7 +58,7 @@
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 3px 20px 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.browse {
|
||||
margin-top: 72px;
|
||||
margin-bottom: 72px;
|
||||
overflow-x: hidden;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
|
||||
@@ -50,13 +50,11 @@
|
||||
}
|
||||
|
||||
// Photos
|
||||
.gallery__photo {
|
||||
&:before {
|
||||
.gallery__picture:before {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Explore
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
@import "organisms/footer";
|
||||
|
||||
// Layouts
|
||||
@import "layouts/main";
|
||||
@import "layouts/explore";
|
||||
|
||||
// Pages
|
||||
|
||||
@@ -23,5 +23,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if process.env.NODE_ENV !== 'development'}
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<script>
|
||||
import { stores } from '@sapper/app'
|
||||
import { pageReady, animDurationLong, pageTransition } from './store'
|
||||
import {
|
||||
pageReady,
|
||||
pageTransition,
|
||||
transitionLong,
|
||||
transitionPanelIn,
|
||||
transitionDelay
|
||||
} from './store'
|
||||
const { page } = stores()
|
||||
|
||||
// Components
|
||||
@@ -11,6 +17,9 @@
|
||||
import { animateIn, animateOut } from 'animations/Transition'
|
||||
|
||||
|
||||
// Check if path is excluded
|
||||
const isExcluded = path => path.includes(['/viewer/'])
|
||||
|
||||
/*
|
||||
** PAGE LOADING PROCESS
|
||||
** 1. Set pageReady to false
|
||||
@@ -24,21 +33,16 @@
|
||||
let firstLoad = true
|
||||
let previousPage = ''
|
||||
|
||||
// Check if viewer
|
||||
const isExcluded = path => path.includes(['/viewer/'])
|
||||
|
||||
// 1. Watch page change
|
||||
page.subscribe(page => {
|
||||
// Run transition if page is not excluded
|
||||
if (!isExcluded(previousPage) || !isExcluded(page.path)) {
|
||||
// Run the loader animation (only after first load)
|
||||
// Run the loader animation (first load only)
|
||||
if (!firstLoad) {
|
||||
animateIn(scope)
|
||||
}
|
||||
|
||||
// TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
|
||||
|
||||
// Set pageReady to false (?)
|
||||
// Reset pageReady when changing page
|
||||
pageReady.set(false)
|
||||
}
|
||||
|
||||
@@ -49,19 +53,13 @@
|
||||
// 2. Watch when loaded changes
|
||||
pageReady.subscribe(loaded => {
|
||||
if (loaded) {
|
||||
// 3. Hide the loader
|
||||
setTimeout(() => {
|
||||
// Also sets firstLoad to false in order to show the second icon afterwards
|
||||
// 3. Hide the loader and set firstLoad to false (in order to show the second icon afterwards)
|
||||
animateOut(scope, () => firstLoad = false)
|
||||
}, 400) // This duration allows to not come over the transition In
|
||||
// [OU ALORS] les pages changent la valeur de loaded plus tard
|
||||
|
||||
// Scroll back to top of page
|
||||
setTimeout(() => {
|
||||
window.scrollTo(0,0)
|
||||
}, animDurationLong * 0.75 + 400)
|
||||
setTimeout(() => window.scrollTo(0,0), transitionDelay)
|
||||
|
||||
// 4. Run the page's transition in, but a little bit before the end of the loader
|
||||
// 4. Run page entering animation
|
||||
pageTransition.onAnimationEnd()
|
||||
}
|
||||
})
|
||||
@@ -70,7 +68,7 @@
|
||||
<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
|
||||
<div class="transition__loader">
|
||||
{#if firstLoad}
|
||||
<TitleSite />
|
||||
<TitleSite init="true" />
|
||||
|
||||
{:else}
|
||||
<IconGlobe width="44" color="#fff" animated="true" />
|
||||
|
||||
@@ -163,6 +163,7 @@ export const relativeTime = (originDate, limit = 0) => {
|
||||
** Controls Anime.js parallax
|
||||
*/
|
||||
export const parallaxAnime = (element, anime) => {
|
||||
if (element) {
|
||||
const bound = element.getBoundingClientRect()
|
||||
const windowHeight = window.innerHeight
|
||||
if (bound.top < windowHeight && bound.bottom > 0) {
|
||||
@@ -175,6 +176,7 @@ export const parallaxAnime = (element, anime) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
@@ -35,5 +35,7 @@ export let fullscreen = writable()
|
||||
/* ==========================================================================
|
||||
Animation related
|
||||
========================================================================== */
|
||||
export const animDuration = 1400
|
||||
export const animDurationLong = 1800
|
||||
export const transitionDelay = 1400
|
||||
export const transitionNormal = 1400
|
||||
export const transitionLong = 1800
|
||||
export const transitionPanelIn = 700
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 556 B After Width: | Height: | Size: 519 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.245 0c1.615.005 2.002.02 2.878.06 1.064.048 1.791.217 2.427.464a4.902 4.902 0 0 1 1.772 1.154 4.902 4.902 0 0 1 1.153 1.771c.247.636.416 1.363.465 2.428.042.914.056 1.295.06 3.095v2.055c-.004 1.8-.018 2.182-.06 3.096-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 0 1-1.153 1.772 4.902 4.902 0 0 1-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.049-1.407.06-4.123.06s-3.057-.011-4.124-.06c-1.064-.049-1.79-.218-2.427-.465a4.902 4.902 0 0 1-1.771-1.153A4.902 4.902 0 0 1 .524 16.55c-.247-.636-.416-1.363-.465-2.427C.02 13.247.005 12.86 0 11.245v-2.49c.005-1.616.02-2.002.06-2.878.048-1.065.217-1.792.464-2.428a4.902 4.902 0 0 1 1.154-1.771A4.902 4.902 0 0 1 3.448.524C4.086.277 4.813.108 5.877.06 6.753.02 7.14.005 8.754 0zm-.204 1.802H8.958c-1.739.003-2.101.016-3 .057-.974.045-1.504.208-1.856.345-.467.181-.8.398-1.15.748-.35.35-.567.683-.748 1.15-.137.352-.3.882-.345 1.857-.04.898-.054 1.26-.057 2.999v2.083c.003 1.739.016 2.101.057 3 .045.975.208 1.504.345 1.857.181.466.398.8.748 1.15.35.35.683.566 1.15.747.352.137.882.3 1.857.345 1.054.048 1.37.058 4.04.058h.288c2.407 0 2.738-.012 3.754-.058.975-.045 1.504-.208 1.857-.345.466-.18.8-.398 1.15-.748.35-.35.566-.683.747-1.15.137-.352.3-.881.345-1.856.048-1.055.058-1.371.058-4.041v-.288c0-2.407-.012-2.738-.058-3.753-.045-.975-.208-1.505-.345-1.857a3.098 3.098 0 0 0-.748-1.15 3.099 3.099 0 0 0-1.15-.748c-.352-.137-.881-.3-1.856-.345-.899-.04-1.261-.054-3-.057zM10 4.864a5.135 5.135 0 1 1 0 10.271 5.135 5.135 0 0 1 0-10.27zm0 1.802a3.334 3.334 0 1 0 0 6.667 3.334 3.334 0 0 0 0-6.667zm5.338-3.205a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z" fill="#FFF" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1020 B After Width: | Height: | Size: 368 B |
Reference in New Issue
Block a user