WIP Animations all over site
- Run a transition In for each page - Involve a "loader" panel on page change - TODO: tweak the animations and finish the concept
This commit is contained in:
@@ -2,9 +2,6 @@
|
||||
import { onMount } from 'svelte'
|
||||
import { site } from '../utils/store'
|
||||
|
||||
// Dependencies
|
||||
import AOS from 'aos'
|
||||
|
||||
// Components
|
||||
import IconArrow from '../atoms/IconArrow'
|
||||
import TitleSite from '../atoms/TitleSite'
|
||||
@@ -21,10 +18,7 @@
|
||||
** Run code on browser only
|
||||
*/
|
||||
onMount(() => {
|
||||
// Scroll apparitions
|
||||
if (process.browser) {
|
||||
AOS.init()
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
<script context="module">
|
||||
import {
|
||||
apiEndpoints,
|
||||
site,
|
||||
continents,
|
||||
countries,
|
||||
locations
|
||||
} from '../utils/store'
|
||||
import { apiEndpoints, } from '../utils/store'
|
||||
|
||||
export async function preload (page, session) {
|
||||
const req = await this.fetch(apiEndpoints.gql, {
|
||||
@@ -66,11 +60,27 @@
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Manipulate countries data
|
||||
import { onMount } from 'svelte'
|
||||
import {
|
||||
site,
|
||||
continents,
|
||||
countries,
|
||||
locations
|
||||
} from '../utils/store'
|
||||
|
||||
// Components
|
||||
import Transition from '../utils/Transition'
|
||||
|
||||
// Props
|
||||
export const segment = null
|
||||
|
||||
|
||||
/*
|
||||
** Manipulate data
|
||||
*/
|
||||
// Replace each countrie's continent by the database
|
||||
$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
|
||||
|
||||
// Manipulate continents data
|
||||
// Push each country to its continent
|
||||
$countries.forEach(country => {
|
||||
const continent = $continents.find(cont => cont.id === country.continent.id)
|
||||
@@ -78,13 +88,15 @@
|
||||
!continent.countries.includes(country) && continent.countries.push(country)
|
||||
})
|
||||
|
||||
// Manipulate locations data
|
||||
// Replace each location's country by the database
|
||||
$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" global>
|
||||
@import "../style/style.scss";
|
||||
</style>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
<Transition />
|
||||
|
||||
@@ -3,12 +3,11 @@
|
||||
import {
|
||||
site,
|
||||
currentLocation,
|
||||
currentPhotos
|
||||
currentPhotos,
|
||||
pageReady,
|
||||
pageTransition
|
||||
} from '../utils/store'
|
||||
|
||||
// Depencencies
|
||||
import AOS from 'aos'
|
||||
|
||||
// Components
|
||||
import IconArrow from '../atoms/IconArrow'
|
||||
import TitleSite from '../atoms/TitleSite'
|
||||
@@ -17,6 +16,11 @@
|
||||
import Footer from '../organisms/Footer'
|
||||
import SocialMetas from '../utils/SocialMetas'
|
||||
|
||||
// Animations
|
||||
import { animateIn } from '../animations/page'
|
||||
pageTransition.onAnimationEnd = animateIn
|
||||
|
||||
|
||||
// Reset current location if existing
|
||||
$: {
|
||||
if ($currentLocation) currentLocation.set()
|
||||
@@ -25,13 +29,11 @@
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
// Scroll apparitions
|
||||
if (process.browser) {
|
||||
AOS.init()
|
||||
}
|
||||
// Page is loaded
|
||||
pageReady.set(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -57,7 +59,7 @@
|
||||
<TitleSite />
|
||||
</div>
|
||||
|
||||
<div class="page__description style-description">
|
||||
<div class="page__description page__part style-description">
|
||||
<p>{$site.explore_globe}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { site } from '../utils/store'
|
||||
|
||||
// Dependencies
|
||||
import AOS from 'aos'
|
||||
import { site, pageReady } from '../utils/store'
|
||||
|
||||
// Components
|
||||
import IconArrow from '../atoms/IconArrow'
|
||||
@@ -13,18 +10,17 @@
|
||||
import Footer from '../organisms/Footer'
|
||||
import SocialMetas from '../utils/SocialMetas'
|
||||
|
||||
// Categories
|
||||
$: credits = $site.credits_list
|
||||
// Animations
|
||||
import { animateIn } from '../animations/page'
|
||||
pageTransition.onAnimationEnd = animateIn
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
// Scroll apparitions
|
||||
if (process.browser) {
|
||||
AOS.init()
|
||||
}
|
||||
// Page is loaded
|
||||
pageReady.set(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -41,7 +37,7 @@
|
||||
|
||||
<section class="page">
|
||||
<div class="wrap">
|
||||
<div class="page__top">
|
||||
<div class="page__top page__part">
|
||||
<a href="/" class="button-control button-control--pink dir-left">
|
||||
<IconArrow direction="left" color="#fff" class="icon" />
|
||||
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
|
||||
@@ -50,12 +46,12 @@
|
||||
<TitleSite />
|
||||
</div>
|
||||
|
||||
<div class="page__description style-description">
|
||||
<div class="page__description page__part style-description">
|
||||
<p>{$site.credits_text}</p>
|
||||
</div>
|
||||
|
||||
<div class="page__list">
|
||||
{#each credits as category}
|
||||
<div class="page__list page__part">
|
||||
{#each $site.credits_list as category}
|
||||
<div class="page__category">
|
||||
<h2 class="title-category">{category.name}</h2>
|
||||
{#each category.credits as person}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<script context="module">
|
||||
import {
|
||||
apiEndpoints,
|
||||
} from '../utils/store'
|
||||
import { apiEndpoints } from '../utils/store'
|
||||
|
||||
// Preload data
|
||||
export async function preload (page, session) {
|
||||
@@ -18,12 +16,16 @@
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { site, currentLocation, currentPhotos } from '../utils/store'
|
||||
import {
|
||||
site,
|
||||
currentLocation,
|
||||
currentPhotos,
|
||||
pageReady,
|
||||
pageTransition
|
||||
} from '../utils/store'
|
||||
import { lettersToSpan } from '../utils/functions'
|
||||
|
||||
// Dependencies
|
||||
import * as basicScroll from 'basicscroll'
|
||||
import AOS from 'aos'
|
||||
import zenscroll from 'zenscroll'
|
||||
|
||||
// Components
|
||||
@@ -35,6 +37,14 @@
|
||||
import Locations from '../organisms/Locations'
|
||||
import Footer from '../organisms/Footer'
|
||||
import SocialMetas from '../utils/SocialMetas'
|
||||
import Transition from '../utils/Transition'
|
||||
|
||||
// Animations
|
||||
import { animateIn } from '../animations/index'
|
||||
pageTransition.onAnimationEnd = animateIn
|
||||
|
||||
// Props and variables
|
||||
export let photos
|
||||
|
||||
// Reset current location if existing
|
||||
$: {
|
||||
@@ -42,48 +52,13 @@
|
||||
if ($currentPhotos) currentPhotos.set()
|
||||
}
|
||||
|
||||
// Props and variables
|
||||
export let photos
|
||||
let appearing
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
if (process.browser) {
|
||||
// Scroll apparitions
|
||||
AOS.init()
|
||||
|
||||
// Parallax titles
|
||||
const titleHouses = document.getElementById('title-houses')
|
||||
const scrollTitleHouses = basicScroll.default.create({
|
||||
elem: titleHouses,
|
||||
direct: titleHouses,
|
||||
from: 0,
|
||||
to: window.innerHeight * 0.6,
|
||||
props: {
|
||||
'--translateX': {
|
||||
from: '-3%',
|
||||
to: '-20%'
|
||||
}
|
||||
}
|
||||
}).start()
|
||||
|
||||
const titleWorld = document.getElementById('title-world')
|
||||
const scrollTitleWorld = basicScroll.default.create({
|
||||
elem: titleWorld,
|
||||
direct: titleWorld,
|
||||
from: document.querySelector('.explore__description').getBoundingClientRect().top,
|
||||
to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
|
||||
props: {
|
||||
'--translateX': {
|
||||
from: '4%',
|
||||
to: '-4%'
|
||||
}
|
||||
}
|
||||
}).start()
|
||||
}
|
||||
// Page is loaded
|
||||
pageReady.set(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -100,14 +75,14 @@
|
||||
|
||||
<section class="intro">
|
||||
<div class="anim-mask">
|
||||
<div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
|
||||
<div class="anim title-parallax" id="title-houses">
|
||||
<h1 class="title-massive" aria-label="Houses">
|
||||
{@html lettersToSpan('Houses')}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="wrap" id="intro-description">
|
||||
<div class="intro__description style-description">
|
||||
<p>{$site.description}</p>
|
||||
|
||||
@@ -117,11 +92,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Carousel {photos} />
|
||||
<div id="intro-carousel">
|
||||
<Carousel {photos} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="explore explore--homepage">
|
||||
<div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
|
||||
<div class="of" id="title-of" aria-label="of">
|
||||
<div class="anim-mask">
|
||||
{@html lettersToSpan('of')}
|
||||
</div>
|
||||
@@ -134,7 +111,7 @@
|
||||
<InteractiveGlobe />
|
||||
|
||||
<div class="anim-mask anim-title">
|
||||
<h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
|
||||
<h1 class="title-massive title-parallax" id="title-world" aria-label="World">
|
||||
{@html lettersToSpan('World')}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
<script context="module">
|
||||
import {
|
||||
apiEndpoints,
|
||||
site,
|
||||
locations,
|
||||
currentLocation,
|
||||
currentPhotos
|
||||
} from '../../../utils/store'
|
||||
import { stores } from '@sapper/app'
|
||||
import { apiEndpoints } from '../../../utils/store'
|
||||
|
||||
// Preload data
|
||||
export async function preload (page, session) {
|
||||
@@ -22,11 +15,20 @@
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { stores } from '@sapper/app'
|
||||
import {
|
||||
site,
|
||||
locations,
|
||||
currentLocation,
|
||||
currentPhotos,
|
||||
pageReady,
|
||||
pageTransition
|
||||
} from '../../../utils/store'
|
||||
import { formatDate, relativeTime, getThumbnail } from '../../../utils/functions'
|
||||
const { page } = stores()
|
||||
|
||||
// Dependencies
|
||||
import AOS from 'aos'
|
||||
import lazySizes from 'lazysizes'
|
||||
|
||||
// Components
|
||||
import IconGlobe from '../../../atoms/IconGlobe'
|
||||
@@ -39,6 +41,10 @@
|
||||
import Footer from '../../../organisms/Footer'
|
||||
import SocialMetas from '../../../utils/SocialMetas'
|
||||
|
||||
// Animations
|
||||
import { animateIn } from '../../../animations/place'
|
||||
pageTransition.onAnimationEnd = animateIn
|
||||
|
||||
// Props and variables
|
||||
export let photos
|
||||
let layoutSetting
|
||||
@@ -70,18 +76,15 @@
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
// Page is loaded
|
||||
pageReady.set(true)
|
||||
|
||||
// Get layout setting from storage
|
||||
layoutSetting = localStorage.getItem('photosLayout')
|
||||
|
||||
if (process.browser) {
|
||||
// Scroll apparitions
|
||||
AOS.init()
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -95,6 +98,7 @@
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section class="place">
|
||||
<div class="place__title">
|
||||
<h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<script context="module">
|
||||
import { stores } from '@sapper/app'
|
||||
import {
|
||||
apiEndpoints,
|
||||
locations,
|
||||
currentLocation,
|
||||
currentPhotos
|
||||
} from '../../../../utils/store'
|
||||
import { apiEndpoints } from '../../../../utils/store'
|
||||
|
||||
// Define either to preload data or use the store
|
||||
let preloaded
|
||||
@@ -16,7 +11,7 @@
|
||||
export async function preload (page, session) {
|
||||
// Load the photos if not loaded
|
||||
if (!preloaded) {
|
||||
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%`)
|
||||
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}%`)
|
||||
const photos = await req.json()
|
||||
return {
|
||||
photos: photos.data
|
||||
@@ -31,7 +26,14 @@
|
||||
|
||||
<script>
|
||||
import { onMount, createEventDispatcher } from 'svelte'
|
||||
import { goto } from '@sapper/app'
|
||||
import {
|
||||
site,
|
||||
locations,
|
||||
currentLocation,
|
||||
currentPhotos,
|
||||
pageReady,
|
||||
pageTransition
|
||||
} from '../../../../utils/store'
|
||||
import { getThumbnail } from '../../../../utils/functions'
|
||||
const { page } = stores()
|
||||
const dispatch = createEventDispatcher()
|
||||
@@ -42,24 +44,25 @@
|
||||
import Carousel from '../../../../organisms/Carousel'
|
||||
import SocialMetas from '../../../../utils/SocialMetas'
|
||||
|
||||
// Animations
|
||||
// import { animateIn } from '../../../animations/photoPage'
|
||||
// pageTransition.onAnimationEnd = animateIn
|
||||
|
||||
|
||||
// Props
|
||||
export let photos
|
||||
|
||||
// Variables
|
||||
let windowWidth
|
||||
let currentPhoto
|
||||
let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
|
||||
|
||||
// Define current location
|
||||
const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
|
||||
|
||||
// Update store current location informations
|
||||
if (!$currentLocation) currentLocation.set(location)
|
||||
// Update store current location
|
||||
if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.location))
|
||||
if (!$currentPhotos) currentPhotos.set(photos)
|
||||
|
||||
// The photo has changed from the carousel
|
||||
const photoChanged = event => {
|
||||
currentPhoto = event.detail.currentPhoto
|
||||
console.log('photoChanged [photo] event: ', currentPhoto.slug)
|
||||
|
||||
// Change the URL to the current photo
|
||||
if (!event.detail.init) {
|
||||
@@ -82,22 +85,16 @@
|
||||
|
||||
|
||||
/*
|
||||
!!! TODO:
|
||||
- URL navigation on photo change (from Carousel)
|
||||
- If coming to direct URL, show the proper photo (i.e currentIndex from photo.slug in URL)
|
||||
- Get currentPhoto from Carousel to update title and metas
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
** Run code when mounted
|
||||
*/
|
||||
onMount(() => {
|
||||
// Page is loaded
|
||||
pageReady.set(true)
|
||||
|
||||
/*
|
||||
!!! TODO:
|
||||
- Change the title with the current photo name and update Metas (with window location url)
|
||||
*/
|
||||
// console.log(currentPhoto)
|
||||
|
||||
dispatch('changeUrl', {
|
||||
page: $page
|
||||
@@ -106,14 +103,14 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Houses Of – Photos of {location.name}, {location.country.name}</title>
|
||||
<meta name="description" content={location.description}>
|
||||
<title>{$site.seo_name} – Photos of {$currentLocation.name}, {$currentLocation.country.name}</title>
|
||||
<meta name="description" content="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}">
|
||||
<SocialMetas
|
||||
title="Houses Of - Beautiful houses of {location.name}, {location.country.name}"
|
||||
description="Houses Of {location.name} {location.description}"
|
||||
title="{$site.seo_name} - Beautiful homes of {$currentLocation.name}, {$currentLocation.country.name}"
|
||||
description="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}"
|
||||
image={getThumbnail(currentPhoto.image.private_hash, 1200, 630)}
|
||||
url="//{$page.host.split(':3000')[0]}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}"
|
||||
/>
|
||||
<!-- url="//{$page.host.split(':3000')[0]}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}" -->
|
||||
<!-- image={currentPhoto ? fn.getThumbnail(currentPhoto.image.private_hash, 1200, 630) : null} -->
|
||||
</svelte:head>
|
||||
|
||||
<svelte:window bind:innerWidth={windowWidth} />
|
||||
@@ -129,7 +126,7 @@
|
||||
<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
|
||||
<a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
|
||||
<IconCross color="#fff" width="18" class="icon" />
|
||||
<IconCross color="#fff" width="18" class="icon" hidden="true" />
|
||||
</a>
|
||||
@@ -137,7 +134,7 @@
|
||||
</div>
|
||||
|
||||
<Carousel
|
||||
{photos}
|
||||
photos={photos}
|
||||
viewer={true}
|
||||
init={$page}
|
||||
on:photoChange={photoChanged}
|
||||
|
||||
Reference in New Issue
Block a user