Add parallax to hero section

package-lock.json

@@ -12509,6 +12509,11 @@
         "isobject": "2.1.0"
       }
     },
+    "rellax": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rellax/-/rellax-1.4.0.tgz",
+      "integrity": "sha1-wGJrwlkqxzBkeo+xyIjxw6yFb3E="
+    },
     "remarkable": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.1.tgz",

package.json

@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "gumshoe": "github:cferdinandi/gumshoe",
+    "rellax": "^1.4.0",
     "sanitize.css": "^4.1.0",
     "smooth-scroll": "^12.1.5",
     "vanilla-tilt": "^1.4.1"

src/hbs/partials/components/hero.hbs

@@ -1,14 +1,23 @@
 <section class="section hero" {{#if hero.id}} id="{{hero.id}}" {{/if}}>
   <div class="hero__canvas"></div>
-  <h1 class="hero__header">
-    <div class="hero__header--upper">{{ hero.header.upper }}</div>
-    <div class="hero__header--lower">{{ hero.header.lower }}</div>
-  </h1>
 
-  <div class="hero__counter">{{ hero.counterText }}</div>
+    <h1 class="hero__header">
+      <div class="js-parallax" data-rellax-speed="2">
+        <div class="hero__header--upper">{{ hero.header.upper }}</div>
+      </div>
+      <div class="js-parallax" data-rellax-speed="1">
+        <div class="hero__header--lower">{{ hero.header.lower }}</div>
+      </div>
+    </h1>
+
+  <div class="hero__counter">
+    <div class="js-parallax" data-rellax-speed="-0.2">
+      {{ hero.counterText }}
+    </div>
+  </div>
 
   <div class="hero__bottom">
-    <div class="hero__detail">
+    <div class="hero__detail js-parallax" data-rellax-speed="-0.15">
       <h3 class="hero__detail__title">{{ hero.eventsLabel }}</h3>
       {{#each hero.events as |event|}}
         <p class="hero__detail__event">
@@ -26,8 +35,10 @@
     }}
 
     <a href="{{ hero.nextSectionLink.link }}" class="hero__scroll">
-      {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
-      <div class="hero__scroll__text">{{ hero.nextSectionLink.text }}</div>
+      <div class="js-parallax" data-rellax-speed="0.2">
+        {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
+        <div class="hero__scroll__text">{{ hero.nextSectionLink.text }}</div>
+      </div>
     </a>
 
   </div>

src/scripts/main.js

@@ -2,8 +2,10 @@ import 'babel-polyfill';
 import 'vanilla-tilt';
 import nav from './nav';
 import scroll from './scroll';
+import parallax from './parallax';
 
 document.addEventListener('DOMContentLoaded', () => {
   nav();
   scroll();
+  parallax();
 });

src/scripts/parallax.js

@@ -0,0 +1,13 @@
+import Rellax from 'rellax';
+
+const PARALLAX_CLASS = '.js-parallax';
+
+export default function init() {
+  return new Rellax(PARALLAX_CLASS, {
+    speed: -2,
+    center: false,
+    round: true,
+    vertical: true,
+    horizontal: false
+  });
+}

src/styles/base/_colors.scss

@@ -11,6 +11,6 @@ $color-citron: #94ac20;
 $color-scampi: #694ac9;
 $color-corn: #e4c102;
 $color-red: #ef2f00;
-$color-blue: #3f0aff;
+$color-blue: #00b4ff;
 $color-turquoise: #6eccce;
 $color-tangerine: #e78d01;