Движение изображения (паралакс) относительно скролла (нативный js)

Question

Необходимо реализовать горизонтальный паралакс изображения. Во время скролла страницы, при достижения блока, изображение должно начать двигаться из левой границы окна в правую. Как посчитать пропорцию высоты и ширины окна от ширины картинки. Чтобы независимо от разрешения окна картинка двигалась строго по ширине контейнера. В данный момент изображение уезжает за пределы вьюпорта

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>

Answer 1

Если я задачу понял правильно, то решение еще проще, чем было:

Чтобы изображение смещалось "от границы до границы" по горизонтали, нужно задавать смещение фона в процентах (от 0 до 100%), иначе необходимо знать масштабированный размер изображения.
Выражение window.innerHeight - r.y станет положительным, когда изображение попадет во viewport при вертикальном смещении (скроллинге). Это значение и следует взять для расчета горизонтального смещения: (window.innerHeight - r.y) * moveCoef
Рассчитанную величину нужно ограничить в интервале [0, 100]
Коэффициент moveCoef можно рассчитать так, чтобы смещение в 100% достигалось при полном появлении изображения во viewport: moveCoef = 100 / imageHeight, или при выходе изображения за пределы viewport при прокрутке:
moveCoef = 100 / (window.innerHeight + r.height) (в этом случае, расчет нужно перенести в тело функции scroll().

const rangeLimit = (v) => v > 100 ? 100 : (v < 0 ? 0 : v);

var moveCoef = 100 / 600; //600px - высота изображения

window.addEventListener("scroll", scroll);
window.addEventListener("resize", scroll);
scroll();

function scroll() {
  let r = paralax.getBoundingClientRect();

  let move = (window.innerHeight - r.y) * moveCoef;
  paralax.style.backgroundPositionX = rangeLimit(move) + "%";
}

#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" id="container">
  <div id="paralax"></div>
</div>
<div class="space2"></div>

БЛОГ НА HUSL

Движение изображения (паралакс) относительно скролла (нативный js)

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