Parallax refactoring

src/components/parallax/budda-parallax.pug

@@ -0,0 +1,32 @@
+- var path = "parallax/budda"
+.parallax.parallax--feedback
+  picture(data-speed="0.1").parallax__layer
+    source(media="(min-width: 1801px)" type="image/jpg" srcset=require(`images/${path}/2560/1.jpg`))
+    source(media="(min-width: 1201px)" type="image/jpg" srcset=require(`images/${path}/1800/1.jpg`))
+    source(media="(min-width: 769px)" type="image/jpg" srcset=require(`images/${path}/1200/1.jpg`))
+    source(media="(min-width: 481px)" type="image/jpg" srcset=require(`images/${path}/768.jpg`))
+    source(media="(max-width: 480px)" type="image/jpg" srcset=require(`images/${path}/320.jpg`))
+    img(src=require(`images/${path}/768.jpg`) alt="").parallax__image
+  picture(data-speed="0.18").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/2.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/2.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/2.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.4").parallax__layer
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/budda.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.6").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/4.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/4.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/4.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.65").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/5.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/5.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/5.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.8").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/6.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/6.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/6.png`))
+    img(src="" alt="").parallax__image

src/components/parallax/mountain-parallax.pug

@@ -0,0 +1,37 @@
+- var path = "parallax/mountain"
+.parallax
+  picture(data-speed="0.1").parallax__layer
+    source(media="(min-width: 1801px)" type="image/jpg" srcset=require(`images/${path}/2560/1.jpg`))
+    source(media="(min-width: 1201px)" type="image/jpg" srcset=require(`images/${path}/1800/1.jpg`))
+    source(media="(min-width: 769px)" type="image/jpg" srcset=require(`images/${path}/1200/1.jpg`))
+    source(media="(min-width: 481px)" type="image/jpg" srcset=require(`images/${path}/768.jpg`))
+    source(media="(max-width: 480px)" type="image/jpg" srcset=require(`images/${path}/320.jpg`))
+    img(src=require(`images/${path}/768.jpg`) alt="").parallax__image
+  picture(data-speed="0.25").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/2.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/2.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/2.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.35").parallax__layer
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/balloon.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.38").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/4.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/4.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/4.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.42").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/5.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/5.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/5.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.45").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/6.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/6.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/6.png`))
+    img(src="" alt="").parallax__image
+  picture(data-speed="0.45").parallax__layer
+    source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/7.png`))
+    source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/7.png`))
+    source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/7.png`))
+    img(src="" alt="").parallax__image

src/components/reviews/reviews.pug

@@ -2,31 +2,4 @@ include ./review
 include ./reviews-content
 
 section.reviews(id="reviews")
-  #reviews-component
-      //- .reviews__title
-      //-   h2.section__title.reviews__title-text Что обо мне говорят
-      //-   .reviews-slider__buttons.slider-btns.slider-btns--rounded
-      //-     button(
-      //-       type="button"
-      //-       :disabled="prevBtnDisable"
-      //-       @click.prevent="slide('prev')"
-      //-     ).slider-btn.slider-btn--prev
-      //-       +icon('short-arrow', 'slider-btn__icon')
-      //-     button(
-      //-       type="button"
-      //-       :disabled="nextBtnble"
-      //-       @click.prevent="slide('next')"
-      //-     ).slider-btn.slider-btn--next
-      //-       +icon('short-arrow', 'slider-btn__icon')
-      //-   {{test}}
-      //- .reviews-slider
-      //-   carousel(
-      //-     ref="carousel"
-      //-     :pagination-enabled="false"
-      //-     :per-page-custom="[[320, 1], [577, 2]]"
-      //-   ).revies-slider__list
-      //-     slide(
-      //-       v-for="review in reviews"
-      //-       :key="review.id"
-      //-     ).reviews__slider-item
-      //-       review(:review="review")
+  #reviews-component

src/index.pug

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

src/mixins.pug

@@ -45,21 +45,4 @@ mixin triangles(direction, className)
       if direction == 'bottom'
         polygon(points="0,100 1000,100 1000,0")
       else
-        polygon(points="0,0 0,100 1000,0")
-
-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
+        polygon(points="0,0 0,100 1000,0")

src/scripts/parallax.js

@@ -1,23 +1,35 @@
-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}%)`;
-  });
-}
+const parallax = document.querySelectorAll('.parallax');
+let windowWidth = null;
+
+(() => {
+  function getWindowWidth() {
+    windowWidth = document.querySelector('body').clientWidth;
+  };
+
+  getWindowWidth();
+
+  window.addEventListener('resize', () => getWindowWidth())
+})();
+
+Array.from(parallax).forEach(parallax => {
+  const layers = parallax.children;
+  const parent = parallax.parentNode;
+  const parentOffsetTop = parent.offsetTop;
 
-window.addEventListener("scroll", e => {
-  const scrollOffset = window.pageYOffset;
-  moveLayers(layers, scrollOffset);
-  moveLayers(layersFeedback, scrollOffset, parallaxFeedbackOffset);
-})
+  function moveLayers (scrollOffset) {
+    Array.from(layers).forEach(layer => {
+      const divider = layer.dataset.speed;
+      const strafe = scrollOffset * divider / (-60);
+
+      layer.style.transform = `translateY(${ strafe }%)`;
+    });
+  }
+
+  window.addEventListener('scroll', e => {
+    const scrollOffset = window.pageYOffset;
+
+    if (windowWidth > 768 && scrollOffset - parentOffsetTop >= 0) {
+      moveLayers(scrollOffset - parentOffsetTop);
+    }
+  });
+});

src/scripts/reviews.js

@@ -83,7 +83,7 @@ new Vue({
         item.photo = requirePic;
         return item;
       });
-    },
+    }
   }
 
 })

src/styles/blocks/feedback.pcss

@@ -1,3 +1,6 @@
 .feedback {
   position: relative;
+  width: 100%;
+  min-height: 1600px;
+  overflow: hidden;
 }