Place: Use Rellax to add some parallax effects

- Added on title, switcher button and illustration
- Not very suitable for photo number

package.json

@@ -22,6 +22,7 @@
     "lazysizes": "^5.2.0",
     "normalize.css": "^8.0.1",
     "polka": "^1.0.0-next.11",
+    "rellax": "^1.12.1",
     "scroll-out": "^2.2.8",
     "sirv": "^0.4.2",
     "svelte-lazy": "^0.1.10",

pnpm-lock.yaml

@@ -5,6 +5,7 @@ dependencies:
   lazysizes: 5.2.0
   normalize.css: 8.0.1
   polka: 1.0.0-next.11
+  rellax: 1.12.1
   scroll-out: 2.2.8
   sirv: 0.4.2
   svelte-lazy: 0.1.10
@@ -3199,6 +3200,10 @@ packages:
       node: '>= 0.10'
     resolution:
       integrity: sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+  /rellax/1.12.1:
+    dev: false
+    resolution:
+      integrity: sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA==
   /repeating/2.0.1:
     dependencies:
       is-finite: 1.1.0
@@ -3913,6 +3918,7 @@ specifiers:
   postcss: ^7.0.27
   postcss-load-config: ^2.1.0
   postcss-preset-env: ^6.7.0
+  rellax: ^1.12.1
   rollup: ^2.6.1
   rollup-plugin-babel: ^4.4.0
   rollup-plugin-glslify: ^1.2.0

src/animations/place.js

@@ -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]')
+}

src/routes/location/[country]/[place].svelte

@@ -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>

src/style/pages/_place.scss

@@ -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);
             }
         }
-
     }
-}
+}