поблочная прокрутка страницы

Question

Может кто подскажет. Есть одностраничный сайт в несколько блоков. И мне нужно сделать так, чтобы каждый блок, который при скролле начинает уходить за пределы верхней границы вьюпорта, начинал скроллиться с меньшей скоростью чем тот, который идет за ним. Ну и так далее по очереди. Я начал делать через свойство "translateY", которое делится на 2, от прокрутки документа. На первом экране это работает, но только как то дерганно, а вот потом вообще начинается белиберда. Не могу понять почему( Есть какой то способ? Но интересует только на чистом js. Спасибо заранее

https://codepen.io/sergo/pen/gOrdWaX?editors=0010

const sections = document.querySelectorAll('.section');

document.addEventListener('scroll', function(){
  let scrollPage = window.pageYOffset;
  
  sections.forEach( item => {
  
  let sectionTopBorder = item.getBoundingClientRect().top;
  let sectionBottomBorder = item.getBoundingClientRect().bottom;
  console.log(sectionBottomBorder);  
  if( sectionTopBorder < 0 ){
    item.style.transform = 'translateY(' + scrollPage / 2 + 'px)';
    // item.querySelector('.section__inner').style.position = "fixed";    
  } else{
    item.style.transform = 'translateY(0)';
    // item.querySelector('.section__inner').style.position = "relative"; 
  } 
  
  });
});

body{
  
}

.section{
  position: relative;
  height: 100vh;
  border: 1px solid;
  background: #FFF;
}

.section__inner{
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

.section__inner img{
  width: 100%;
  height: 100%;
}

*{
  margin: 0;
  padding: 0;
}

<div class="section-wrap">
  
  <section class="section" style="display: none;">
    <div class="section__inner"></div>
  </section>
  
  <section class="section section-1" style="z-index: 1; background: red">
    <div class="section__inner">
       <img src="https://tes-game.ru/_nw/14/08884847.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-2" style="z-index: 2; background: green">
    <div class="section__inner">
      <img src="https://xage.ru/media/posts/2019/8/26/26-minutes-of-gameplay-dying-light-2-in-4k-trailer_BOLSTko.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-3" style="z-index: 3; background: yellow">
    <div class="section__inner" >
   <img src="https://free4kwallpapers.com/uploads/originals/2020/05/02/game-art-wallpaper.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-4" style="z-index: 4; background: pink">
    <div class="section__inner" >
      <img src="https://images.hdqwalls.com/wallpapers/bthumb/resident-evil-2-2019-4k-5a.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-5" style="z-index: 5; background: grey">
    <div class="section__inner"></div>
  </section>
  
</div>

Answer 1

Зачем вам вообще нужен здесь window.pageYOffset? А вот requestAnimationFrame - крайне желателен.

const sections = document.querySelectorAll('.section');

function repaint() {
  requestAnimationFrame(() => {
    sections.forEach(item => {
      let rect = item.getBoundingClientRect();
      item.style.transform = (rect.top < 0 && rect.bottom > 0) ? 
        'translateY(' + (-rect.top / 2) + 'px)' : '';
    });
  });
}

document.addEventListener('scroll', repaint);
window.addEventListener('resize', repaint);

body{
  
}

.section{
  position: relative;
  height: 100vh;
  border: 1px solid;
  background: #FFF;
}

.section__inner{
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

.section__inner img{
  width: 100%;
  height: 100%;
}

*{
  margin: 0;
  padding: 0;
}

<div class="section-wrap">
  
  <section class="section" style="display: none;">
    <div class="section__inner"></div>
  </section>
  
  <section class="section section-1" style="z-index: 1; background: red">
    <div class="section__inner">
       <img src="https://tes-game.ru/_nw/14/08884847.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-2" style="z-index: 2; background: green">
    <div class="section__inner">
      <img src="https://xage.ru/media/posts/2019/8/26/26-minutes-of-gameplay-dying-light-2-in-4k-trailer_BOLSTko.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-3" style="z-index: 3; background: yellow">
    <div class="section__inner" >
   <img src="https://free4kwallpapers.com/uploads/originals/2020/05/02/game-art-wallpaper.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-4" style="z-index: 4; background: pink">
    <div class="section__inner" >
      <img src="https://images.hdqwalls.com/wallpapers/bthumb/resident-evil-2-2019-4k-5a.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-5" style="z-index: 5; background: grey">
    <div class="section__inner"><img src="https://i.ytimg.com/vi/kszGLd6x_oc/maxresdefault.jpg" alt=""></div>
  </section>
  
</div>

БЛОГ НА HUSL

поблочная прокрутка страницы

Ответы (1 шт):