Параллакс элементов при скролле

var paralax = document.getElementById("paralax"); 
 
/* коэфициент сдвига: 1 сдвиг равный смещению по оси Y, 0 без сдвига */ 
var moveCoef = 0.5; 
 
window.addEventListener("scroll", scroll); 
window.addEventListener("resize", scroll); 
scroll(); 
 
function scroll() { 
  /* берём огнаничивающий прямоугольник паралакса относительно окна (фрейма) */ 
  var r = paralax.getBoundingClientRect(); 
 
  /* центр паралакса */ 
  var paralaxYCenter = r.y + r.height / 2; 
  /* центр экрана */ 
  var scrollYCenter = window.innerHeight / 2; 
 
  /* Вычисляем смещение */ 
  var move = (paralaxYCenter - scrollYCenter) * moveCoef - 100; 
 
  paralax.style.backgroundPositionY = move + "px"; 
}

#paralax { 
  background: url(https://i.stack.imgur.com/GU2R1.jpg); 
  width: 400px; 
  height: 200px; 
  background-size: 180%; 
} 
 
.space1 { 
  height: 160px; 
} 
 
.space2 { 
  height: 800px; 
} 
 
body { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

<div class="space1">Скролируй ниже</div> 
<div id="paralax"></div> 
<div class="space2"></div>