Enable parallax only from lg up

src/scripts/parallax.js

@@ -3,11 +3,22 @@ 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
+  let rellax;
+
+  window.addEventListener('resize', () => {
+    const width = window.innerWidth;
+
+    if (width >= 1200 && !rellax) {
+      rellax = new Rellax(PARALLAX_CLASS, {
+        speed: -2,
+        center: false,
+        round: true,
+        vertical: true,
+        horizontal: false
+      });
+    } else if (rellax && rellax.destroy && width < 1140) {
+      rellax.destroy();
+      rellax = undefined;
+    }
   });
 }

src/styles/base/_settings.scss

@@ -26,7 +26,7 @@ $screen-xlg: 'only screen and (min-width: #{$xlg})';
 $screen-only-xs: 'only screen and (max-width: #{$xs - 1})';
 $screen-only-sm: 'only screen and (min-width: #{$sm}) and (max-width: #{$md - 1})';
 $screen-only-md: 'only screen and (min-width: #{$md}) and (max-width: #{$lg - 1})';
-$screen-only-lg: 'only screen and (min-width: #{$lg})';
+$screen-only-lg: 'only screen and (min-width: #{$lg}) and (max-width: #{$xlg - 1})';
 
 //=======================
 // Typography

src/styles/components/_introduction.scss

@@ -22,7 +22,6 @@
   &__header {
     position: relative;
     margin: 30px 0;
-    transform: translate(0, 40px);
 
     @media #{$screen-sm} {
       flex: 0 1 100%;
@@ -30,6 +29,7 @@
 
     @media #{$screen-lg} {
       margin: 80px 0;
+      transform: translate(0, 40px);
     }
   }
 
@@ -102,9 +102,7 @@
   &__button {
     margin-bottom: 30px;
 
-    @media #{$screen-only-xs},
-      #{$screen-only-sm},
-      #{$screen-only-md} {
+    @media #{$screen-only-lg} {
       .js-parallax {
         @include disableTransform();
       }

src/styles/components/_project.scss

@@ -20,12 +20,6 @@
   }
 
   &__header {
-    @media #{$screen-only-xs}, #{$screen-only-sm} {
-      .js-parallax {
-        @include disableTransform();
-      }
-    }
-
     @media #{$screen-md} {
       position: absolute;
       bottom: 100px;
@@ -83,10 +77,6 @@
     width: 100%;
     margin: 10px 0;
 
-    @media #{$screen-only-xs}, #{$screen-only-sm} {
-      @include disableTransform();
-    }
-
     @media #{$screen-sm} {
       width: 80%;
       max-width: 250px;
@@ -134,12 +124,6 @@
   &__button {
     margin: 10px 0;
 
-    @media #{$screen-only-xs}, #{$screen-only-sm} {
-      .js-parallax {
-        @include disableTransform();
-      }
-    }
-
     @media #{$screen-md} {
       position: absolute;
       top: 50%;

src/styles/components/_structure.scss

@@ -29,15 +29,6 @@
   &__header {
     position: absolute;
     z-index: 2;
-    transform: translate(-2px, -600px);
-
-    @media #{$screen-sm} {
-      transform: translate(-2px, -350px);
-    }
-
-    @media #{$screen-md} {
-      transform: translate(-2px, -280px);
-    }
 
     @media #{$screen-lg} {
       transform: translate(-2px, -260px);
@@ -83,10 +74,6 @@
   &__button {
     margin-top: 10px;
 
-    @media #{$screen-only-xs}, #{$screen-only-sm} {
-      @include disableTransform();
-    }
-
     @media #{$screen-sm} {
       position: absolute;
       right: 18%;

src/styles/components/_team.scss

@@ -36,19 +36,13 @@
 
     @media #{$screen-md} {
       position: absolute;
-      top: 27%;
+      top: 44%;
       z-index: 1;
     }
 
     @media #{$screen-lg} {
       top: 31%;
     }
-
-    @media #{$screen-only-xs}, #{$screen-only-sm} {
-      .js-parallax {
-        @include disableTransform();
-      }
-    }
   }
 
   &__counter {
@@ -115,13 +109,7 @@
       justify-content: space-between;
     }
 
-    @media #{$screen-only-xs}, #{$screen-only-sm} {
-      .js-parallax {
-        @include disableTransform();
-      }
-    }
-
-    @media #{$screen-md} {
+    @media #{$screen-lg} {
       transform: translateY(300px);
     }
   }