Add introduction section parallax

gulpfile.babel.js

@@ -125,6 +125,7 @@ gulp.task('hbs', () => {
           './src/hbs/helpers/repeat.js',
           './src/hbs/helpers/svg-icon.js',
           './src/hbs/helpers/new-line.js',
+          './src/hbs/helpers/ternary.js',
           './node_modules/handlebars-helpers/lib/fs.js',
           './node_modules/handlebars-helpers/lib/comparison.js',
           './node_modules/handlebars-helpers/lib/collection.js',

src/hbs/helpers/ternary.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports.register = function(Handlebars, options) {
+  Handlebars.registerHelper('ternary', function(test, yes, no) {
+    return (typeof test === 'function' ? test.call(this) : test) ? yes : no;
+  });
+};

src/hbs/partials/components/heading.hbs

@@ -1,3 +1,5 @@
 <h2 class="heading {{class}}">
-  {{text}}
+  <div class="js-parallax" data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}">
+    {{text}}
+  </div>
 </h2>

src/hbs/partials/components/introduction.hbs

@@ -4,6 +4,7 @@
     {{> components/heading
       text=introduction.header
       class="introduction__header"
+      rellax-speed="0.7"
     }}
 
     <div class="introduction__img" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="400">
@@ -21,9 +22,11 @@
 
       <div class="introduction__content">
         <div class="introduction__paragraph text--small">
-          {{#each introduction.content as |paragraph|}}
-            <p>{{paragraph}}</p>
-          {{/each}}
+          <div class="js-parallax" data-rellax-speed="0.3">
+            {{#each introduction.content as |paragraph|}}
+              <p>{{paragraph}}</p>
+            {{/each}}
+          </div>
         </div>
       </div>
 

src/hbs/partials/components/next-section-link.hbs

@@ -1,3 +1,7 @@
-<a href="{{ nextSection.link }}" class="next-section-link {{class}}">
+<a
+  href="{{ nextSection.link }}"
+  data-title="{{ nextSection.text }}"
+  class="next-section-link {{class}}"
+>
   {{ nextSection.text }}
 </a>

src/styles/components/_introduction.scss

@@ -20,7 +20,9 @@
   }
 
   &__header {
+    position: relative;
     margin: 30px 0;
+    transform: translate(0, 40px);
 
     @media #{$screen-sm} {
       flex: 0 1 100%;

src/styles/components/_next-section-link.scss

@@ -1,7 +1,16 @@
 .next-section-link {
+  @include hoverDistortion();
+
+  z-index: 1;
   display: block;
   font-family: $base-font-family;
   font-size: 13px;
   font-weight: 500;
   text-transform: uppercase;
+
+  @media #{$screen-md} {
+    &:hover {
+      @include hoverDistortionActive();
+    }
+  }
 }