<div class="bg-page">
  <div class="bg-page__image">1</div>
  <div class="bg-page__image">2</div>
  <div class="bg-page__image">3</div>
  <div class="bg-page__image">4</div>
  <div class="bg-page__image">5</div>
</div>

<div class="products">
  <div class="products__item">
    <img src="//placehold.it/300x200/f44336?text=1" alt="" class="products__image">
  </div>
  <div class="products__item">
    <img src="//placehold.it/300x200/9c27b0?text=2" alt="" class="products__image">
  </div>
  <div class="products__item">
    <img src="//placehold.it/300x200/3f51b5?text=3" alt="" class="products__image">
  </div>
  <div class="products__item">
    <img src="//placehold.it/300x200/00bcd4?text=4" alt="" class="products__image">
  </div>
  <div class="products__item">
    <img src="//placehold.it/300x200/4caf50?text=5" alt="" class="products__image">
  </div>
</div>

<div class="bg-images">
  <div class="bg-images__image">1</div>
  <div class="bg-images__image">2</div>
  <div class="bg-images__image">3</div>
  <div class="bg-images__image">4</div>
  <div class="bg-images__image">5</div>
</div>

body {
  margin: 0;
}

.bg-page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  scroll-behavior: smooth;
  z-index: 1;
}

.bg-page__image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 1s linear;
  opacity: 0;
}

.bg-page__image:nth-child(1) {
  background-image: linear-gradient(to right, #f44336, #000);
  opacity: 1;
}

.bg-page__image:nth-child(2) {
  background-image: linear-gradient(to right, #9c27b0, #000);
}

.bg-page__image:nth-child(3) {
  background-image: linear-gradient(to right, #3f51b5, #000);
}

.bg-page__image:nth-child(4) {
  background-image: linear-gradient(to right, #00bcd4, #000);
}

.bg-page__image:nth-child(5) {
  background-image: linear-gradient(to right, #4caf50, #000);
}

.products {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  scroll-behavior: smooth;
  z-index: 2;
}

.products__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.bg-images {
  position: fixed;
  top: 50%;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  scroll-behavior: smooth;
  z-index: 1;
}

.bg-images__image {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 4rem;
  height: 100%;
  background-position: 50% 50%;
  animation: move-bg 4s linear infinite;
}

.bg-images__image:nth-child(odd) {
  background-image: url("//placehold.it/100x100?text=AAA");
}

.bg-images__image:nth-child(even) {
  background-image: url("//placehold.it/100x100?text=BBB");
}

@keyframes move-bg {
  to {
    background-position: 50% calc(50% - 100px);
  }
}

const bgPage = [...document.querySelectorAll('.bg-page > .bg-page__image')];
const bgImages = document.querySelector('.bg-images');
const productsImages = document.querySelector('.products');

let activeSection = 0;
let prevSection = activeSection;
let wheelDir = 0;

function onWheel(e) {
  wheelDir = Math.sign(e.deltaY);
  prevSection = activeSection;
  activeSection = Math.min(bgImages.childElementCount - 1, Math.max(0, activeSection + wheelDir));
  
  if (prevSection === activeSection) return;
  
  bgImages.scrollTop = activeSection * bgImages.clientHeight;
  productsImages.scrollTop = activeSection * productsImages.clientHeight;

  bgPage.forEach(el => el.style.zIndex = 0);

  bgPage[activeSection].style.opacity = 0;
  bgPage[activeSection].style.transition = 'none';
  bgPage[activeSection].style.zIndex = bgPage.length;
  bgPage[prevSection].style.zIndex = bgPage.length - 1;
  
  requestAnimationFrame(() => requestAnimationFrame(() => {
    bgPage[activeSection].style.transition = '';
    bgPage[activeSection].style.opacity = 1;
  }));
}

window.addEventListener('wheel', _.debounce(onWheel, 200, {leading: true, trailing: false}));