Необходимо реализовать горизонтальный паралакс изображения. Во время скролла страницы, при достижения блока, изображение должно начать двигаться из левой границы окна в правую. Как посчитать пропорцию высоты и ширины окна от ширины картинки. Чтобы независимо от разрешения окна картинка двигалась строго по ширине контейнера. В данный момент изображение уезжает за пределы вьюпорта
var moveCoef = 0.5;
window.addEventListener("scroll", scroll);
window.addEventListener("resize", scroll);
scroll();
function scroll() {
var r = paralax.getBoundingClientRect();
var paralaxCenter = r.y + r.height / 2;
var scrollCenter = window.innerHeight / 2;
var move = (paralaxCenter - scrollCenter) * moveCoef;
paralax.style.backgroundPositionX = move + "px";
}
#paralax {
background: url(https://bipbap.ru/wp-content/uploads/2017/04/3dr-19.jpg);
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 100%;
height: 600px;
}
.space1 {
height: 400px;
}
.space2 {
height: 800px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="space1">Скролл вниз</div>
<div class="container">
<div id="paralax"></div>
</div>
<div class="space2"></div>