Add project section parallax

src/hbs/index.hbs

@@ -43,9 +43,12 @@ project:
     - 'The art installation will be a traveling, penetrable sculpture that will provide an indoor and outdoor experience in the form of sounds, light and design. The surface of the installation will reflect the activity in the Doge-ETH bridge. The sculpture will be the space were creatives will realize their artistic vision.'
 
   images:
-    - 'images/project-img1.png'
-    - 'images/project-img2.png'
-    - 'images/project-img3.png'
+    - src: 'images/project-img1.png'
+      parallax: -0.2
+    - src: 'images/project-img2.png'
+      parallax: -0.3
+    - src: 'images/project-img3.png'
+      parallax: -0.1
 
   button:
     label: 'Project Proposal'

src/hbs/partials/components/button.hbs

@@ -1,6 +1,10 @@
 <{{#if href}}a href={{href}} rel="noopener" target="_blank"{{else}}button{{/if}}
   class="button {{ class }}"
-  style="
+>
+  <div
+    class="button__wrapper js-parallax"
+    data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
+    style="
     {{#if outlineColor }}
       color: {{ outlineColor }};
     {{/if}}
@@ -8,8 +12,7 @@
       background-color: {{ backgroundColor }};
     {{/if}}
   "
->
-  <div class="button__wrapper js-parallax" data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}">
+  >
     {{#if icon}}
       <div class="button__icon">
         {{icon}}

src/hbs/partials/components/project.hbs

@@ -5,6 +5,7 @@
     {{> components/heading
       text=project.header
       class="project__header"
+      rellax-speed="-0.2"
     }}
 
     <div class="project__wrapper">
@@ -20,17 +21,22 @@
           backgroundColor="#ff5301"
           label=project.button.label
           href=project.button.href
+          rellax-speed="0.8"
           icon=(svg project.button.icon)
         }}
       </div>
 
       <div class="project__images">
-        {{#each project.images as |imageSrc|}}
-          <img src={{imageSrc}} class="project__image project__image--{{@index}}" alt="" />
+        {{#each project.images as |image|}}
+          <img
+            src={{image.src}}
+            class="project__image project__image--{{@index}} js-parallax"
+            alt=""
+            data-rellax-speed="{{ image.parallax }}"
+          />
         {{/each}}
       </div>
 
-
     </div>
 
     <div class="project__counter">{{ project.counterText }}</div>

src/styles/components/_project.scss

@@ -20,6 +20,12 @@
   }
 
   &__header {
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      .js-parallax {
+        @include disableTransform();
+      }
+    }
+
     @media #{$screen-md} {
       position: absolute;
       bottom: 100px;
@@ -55,6 +61,7 @@
   }
 
   &__images {
+    position: relative;
     padding-top: 10px;
 
     @media #{$screen-sm} {
@@ -76,6 +83,10 @@
     width: 100%;
     margin: 10px 0;
 
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      @include disableTransform();
+    }
+
     @media #{$screen-sm} {
       width: 80%;
       max-width: 250px;
@@ -105,6 +116,7 @@
 
       &--1 {
         position: relative;
+        z-index: 1;
         width: 60%;
         margin: 0;
         margin-top: -25%;
@@ -112,6 +124,7 @@
       }
 
       &--2 {
+        z-index: 3;
         width: 70%;
         margin: 0;
       }
@@ -121,11 +134,17 @@
   &__button {
     margin: 10px 0;
 
+    @media #{$screen-only-xs}, #{$screen-only-sm} {
+      .js-parallax {
+        @include disableTransform();
+      }
+    }
+
     @media #{$screen-md} {
       position: absolute;
       top: 50%;
       left: 15%;
-      z-index: 2;
+      z-index: 5;
     }
   }