flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Place: Use Rellax to add some parallax effects

Browse Source 
- Added on title, switcher button and illustration
- Not very suitable for photo number
This commit is contained in:
Félix Péault
2020-04-19 12:49:38 +02:00
parent 06c1475c5f
commit c1bb2f31bc
5 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/animations/place.js
View File

@@ -1,4 +1,5 @@
import anime from 'animejs'
import Rellax from 'rellax'
import { animDuration, animDelay } from 'utils/store'
@@ -52,4 +53,10 @@ export const animateIn = () => {
translateY: [24, 0],
translateZ: [0, 0]
}, 450)
}
/*
** Parallax
*/
const rellax = new Rellax('[data-rellax-speed]')
}

36
src/routes/location/[country]/[place].svelte
View File

@@ -53,6 +53,7 @@
pageAnimation.set(animateIn)
let layoutSetting
let windowWidth
$: latestPhoto = photos[0]
// Update current location
const location = $locations.find(loc => loc.slug === $page.params.place)
@@ -61,7 +62,6 @@
currentPhotos.set(photos)
// Define dates
$: latestPhoto = photos[0]
$: latestPhotoModified = latestPhoto ? latestPhoto.modified_on.replace(' ', 'T') : ''
$: dateUpdatedFull = latestPhoto ? formatDate(latestPhotoModified, 'FULL') : ''
$: dateUpdatedDatetime = latestPhoto ? formatDate(latestPhotoModified, 'DATETIME') : ''
@@ -110,7 +110,7 @@
<main class="housesof" class:is-transitioning={!$pageReady}>
<section class="place">
<div class="place__title">
<h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
<h1 class="title-location title-location--big" aria-label="Houses of {location.name}" data-rellax-speed="-2.75" data-rellax-max-y="200">
<span class="place__title_top anim-mask">
<span class="place__title_houses">Houses</span>
<em class="place__title_of">of</em>
@@ -120,15 +120,17 @@
</span>
</h1>
<a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change the location">
<span class="center">
<IconGlobe width={windowWidth <= 768 ? 32 : 44} color="#fff" />
<span>Change</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50%" cy="50%" r="43%" />
</svg>
</a>
<div data-rellax-speed="-1.75" data-rellax-max-y="200">
<a href="/choose" class="button-control button-control--big button-control--dashed" aria-label="Change location">
<span class="center">
<IconGlobe width={windowWidth <= 768 ? 32 : 44} color="#fff" />
<span>Change</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50%" cy="50%" r="43%" />
</svg>
</a>
</div>
</div>
<div class="place__wrap wrap">
@@ -158,12 +160,14 @@
</div>
</div>
{#if illu_desktop || illu_mobile}
{#if illu_desktop || illu_desktop_2x || illu_mobile}
<div class="place__illustration">
<div style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
{`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
{`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
/>
<div class="parallax" data-rellax-speed="-5" data-rellax-max-y="400">
<div class="place__illustration_img" style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
{`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
{`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
/>
</div>
</div>
{/if}
</section>

9
src/style/pages/_place.scss
View File

@@ -171,7 +171,11 @@
height: 100%;
will-change: transform, opacity;
div {
.parallax {
width: 100%;
height: 100%;
}
&_img {
position: relative;
left: 50%;
width: 100%;
@@ -191,6 +195,5 @@
background-image: var(--url-desktop-2x);
}
}
}
}
}