body{
  height: 1000px;
  overflow-x: hidden;
}

#back{
  position: fixed;
  display: flex;
  width: 4000px; 
  height: 100vh;
  background: linear-gradient(to left,#e66465, #9198e5);
}

#front{
  position: fixed;
  display: flex;
  width: 8000px; 
  height: 50vh;
  background: linear-gradient(to left,#e66465, #9198e5);
  opacity: 0.5;
}

let yOffsetFront = document.getElementById('front');
let yOffsetBack = document.getElementById('back');

window.addEventListener('scroll', ()=> {
  let pos = Math.floor(window.pageYOffset);
  let pos2 = pos * 2;
  yOffsetBack.style.transform = "translate3d(-"+ pos +"px,0,0)";
  console.log( pos )
  yOffsetFront.style.transform = "translate3d(-"+ pos2 +"px,0,0)";
    console.log( pos2 )
});