Как сделать изменение background position на определённое количество пикселей через каждые 10 пикселей прокрутки?

Question

[Wewq]

Здравствуйте! Прошу, помогите мне с этой проблемой! Я хочу реализовать эту функцию с помощью js или jquery. В интернете ничего не нашёл. Нужно чтобы выглядело как на этом примере https://zollaser.ru/dl206s/

Answer 1

[Андрей Мартынкевич]

Вот, может Вам подойдет

Comments

[Wewq]

Спасибо! Сейчас проверю

Answer 2

[Иван Кулаков]

Должно сработать:

const img = document.getElementById(ID_твоей_картинки);

window.onscroll = () => {
  const scrolled = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  // если достигли картинки (можно еще через IntersectionObserver)
  if (scrolled > img.getBoundingClientRect().top) {
    // step - это кол-во пикселей в шаге
    const step = 2;
    img.style.backgroundPosition = ((scrolled - img.getBoundingClientRect().top) * step) + "px 0px";
  }
}

Answer 3

[y0u]

Если лень разбираться, то там реализовано всё с помощью этого плагина - https://scrollmagic.io/
Пример: https://scrollmagic.io/examples/expert/image_seque...

Comments

[Wewq]

Спасибо!