Parallax effect complete

src/index.pug

@@ -10,7 +10,7 @@ html(lang="en")
   body
     .wrapper
       .welcome
-        +paralax('mountain-baloon')
+        +paralax('mountain', 7)
         include ./components/hero
         include ./components/about
       +triangles('bottom')
@@ -19,7 +19,7 @@ html(lang="en")
         include ./components/works
       +triangles('top', 'triangles--bottom')
       .feedback
-        +paralax('budda')
+        +paralax('budda', 6, 'parallax--feedback')
         include ./components/reviews
         include ./components/contacts
 

src/main.js

@@ -3,4 +3,5 @@ if (process.env.NODE_ENV === "development") {
   require("file-loader!./index.pug");
 }
 
-import "./scripts/skills";
+import "./scripts/skills";
+import "./scripts/parallax";

src/mixins.pug

@@ -46,8 +46,19 @@ mixin triangles(direction, className)
       else
         polygon(points="0,0 0,100 1000,0")
 
-mixin paralax(image)
-  .paralax
-    .paralax__container
-      .paralax__image
-        +image(`bg/${image}.jpg`, 'paralax__image-pic')
+mixin paralax(image, layers, className)
+  .parallax(class=className)
+    - 
+      var speeds = [
+        ['0.1','0.25','0.35','0.38','0.45','0.48','0.5'],
+        ['0.01','0.1','0.25','0.28','0.35','0.38']
+        ]
+    - for (var i = 1; i <= layers; i++)
+      .parallax__layer(data-speed=`${image == 'mountain' ? speeds[0][i-1] : speeds[1][i-1]}`)
+        picture
+          source(srcset=require(`images/parallax/${image}/fhd/${i}.${i === 1 ? 'jpg' : 'png'}`) media="(min-width: 1200px)").parallax__image
+          source(srcset=require(`images/parallax/${image}/qhd/${i}.${i === 1 ? 'jpg' : 'png'}`) media="(min-width: 1800px)").parallax__image
+          if i == 1
+            img(srcset=require(`images/bg/${image}.jpg`)).parallax__image
+          else 
+            img(srcset="").parallax__image

src/scripts/parallax.js

@@ -0,0 +1,23 @@
+const parallax = document.querySelector(".parallax");
+const parallaxFeedback = document.querySelector(".parallax--feedback");
+const layers = parallax.children;
+const layersFeedback = parallaxFeedback.children;
+const parallaxFeedbackOffset = parallaxFeedback.getBoundingClientRect().top;
+
+function moveLayers (layers ,scrollOffset, topOffset = null) {
+  Array.from(layers).forEach(layer => {
+    const divider = layer.dataset.speed;
+    let offset = topOffset 
+      ? scrollOffset - topOffset
+      : scrollOffset;
+    const strafe = offset * divider / (-60);
+
+    layer.style.transform = `translateY(${strafe}%)`;
+  });
+}
+
+window.addEventListener("scroll", e => {
+  const scrollOffset = window.pageYOffset;
+  moveLayers(layers, scrollOffset);
+  moveLayers(layersFeedback, scrollOffset, parallaxFeedbackOffset);
+})

src/styles/blocks/parallax.pcss

@@ -0,0 +1,122 @@
+.parallax {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.parallax__layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+
+  &:nth-child(1) {
+    .parallax__image {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &:nth-child(2) {
+    .parallax__image {
+      top: 300px;
+      right: 0;
+      width: 100%;
+    }
+  }
+  &:nth-child(3) {
+    .parallax__image {
+      right: 10%;
+      margin-right: 15%;
+      top: 480px;
+      width: 200px;
+      height: auto;
+    }
+  }
+  &:nth-child(4) {
+    .parallax__image {
+      left: 0;
+      top: 610px;
+      width: 100%;
+    }
+  }
+  &:nth-child(5) {
+    .parallax__image {
+      left: 0;
+      top: 670px;
+      width: 60%;
+      height: auto;
+    }
+  }
+  &:nth-child(6) {
+    .parallax__image {
+      right: 0;
+      top: 350px;
+    }
+  }
+  &:nth-child(7) {
+    .parallax__image {
+      left: 0;
+      width: 100%;
+      bottom: -400px;
+    }
+  }
+}
+
+.parallax__image {
+  position: absolute;
+}
+
+.parallax--feedback {
+  .parallax__layer {
+    &:nth-child(2) {
+      .parallax__image {
+        top: initial;
+        bottom: -40px;
+        right: 0;
+        width: 100%;
+        }
+      }
+    &:nth-child(3) {
+      .parallax__image {
+        right: 5%;
+        top: 550px;
+        width: auto;
+        margin-right: 0;
+      }
+    }
+    &:nth-child(4) {
+      .parallax__image {
+        top: auto;
+        left: 60px;
+        bottom: -220px;
+        transform: scaleX(-1);
+      }
+    }
+    &:nth-child(5) {
+      .parallax__image {
+        right: -270px;
+        left: initial;
+        top: initial;
+        bottom: -460px;
+        width: 100%;
+        height: auto;
+        transform: scaleX(-1);
+      }
+    }
+    &:nth-child(6) {
+      .parallax__image {
+        right: 300px;
+        top: initial;
+        bottom: -460px;
+        transform: scaleX(-1);
+      }
+    }
+  }
+}