From 3a465ce2b8aadcadca7dd3eb23ad665257914f3a Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Sun, 14 Jan 2018 23:45:42 +0100
Subject: [PATCH] Add introduction section parallax

---
 gulpfile.babel.js                                 | 1 +
 src/hbs/helpers/ternary.js                        | 7 +++++++
 src/hbs/partials/components/heading.hbs           | 4 +++-
 src/hbs/partials/components/introduction.hbs      | 9 ++++++---
 src/hbs/partials/components/next-section-link.hbs | 6 +++++-
 src/styles/components/_introduction.scss          | 2 ++
 src/styles/components/_next-section-link.scss     | 9 +++++++++
 7 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 src/hbs/helpers/ternary.js

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 4137e14..b4ec3f0 100644
--- a/gulpfile.babel.js
+++ b/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',
diff --git a/src/hbs/helpers/ternary.js b/src/hbs/helpers/ternary.js
new file mode 100644
index 0000000..b50c6ca
--- /dev/null
+++ b/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;
+  });
+};
diff --git a/src/hbs/partials/components/heading.hbs b/src/hbs/partials/components/heading.hbs
index 188d8b9..bef3917 100644
--- a/src/hbs/partials/components/heading.hbs
+++ b/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>
diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs
index 773025b..9a45000 100644
--- a/src/hbs/partials/components/introduction.hbs
+++ b/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>
 
diff --git a/src/hbs/partials/components/next-section-link.hbs b/src/hbs/partials/components/next-section-link.hbs
index 8e9d3ed..5dc5cf7 100644
--- a/src/hbs/partials/components/next-section-link.hbs
+++ b/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>
diff --git a/src/styles/components/_introduction.scss b/src/styles/components/_introduction.scss
index 5b630a7..10f31f6 100644
--- a/src/styles/components/_introduction.scss
+++ b/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%;
diff --git a/src/styles/components/_next-section-link.scss b/src/styles/components/_next-section-link.scss
index e73a1ed..39bf72b 100644
--- a/src/styles/components/_next-section-link.scss
+++ b/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();
+    }
+  }
 }