0

скролл изображения

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

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>

3
  • А есть пример того, что должно получится? Commented 9 апр. 2022 в 17:20
  • tgomilar.github.io/paroller.js/#demo пример с городом (третий снизу) , только необходимо чтобы изображение не повторялось. Commented 10 апр. 2022 в 7:37
  • Я правильно понял, что Вы хотите, чтобы картинка двигалась от границы до границы, и не продвигалась дальше? Commented 10 апр. 2022 в 20:30

1 ответ 1

0

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

  1. Чтобы изображение смещалось "от границы до границы" по горизонтали, нужно задавать смещение фона в процентах (от 0 до 100%), иначе необходимо знать масштабированный размер изображения.
  2. Выражение window.innerHeight - r.y станет положительным, когда изображение попадет во viewport при вертикальном смещении (скроллинге). Это значение и следует взять для расчета горизонтального смещения: (window.innerHeight - r.y) * moveCoef
  3. Рассчитанную величину нужно ограничить в интервале [0, 100]
  4. Коэффициент 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.