@Wewq

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

Здравствуйте! Прошу, помогите мне с этой проблемой! Я хочу реализовать эту функцию с помощью js или jquery. В интернете ничего не нашёл. Нужно чтобы выглядело как на этом примере https://zollaser.ru/dl206s/ 61b1001b5431b003243368.png
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
AndrewMarty
@AndrewMarty
HTML - верстальщик
Вот, может Вам подойдет
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
ivankprod
@ivankprod
Системный / веб fullstack-разработчик
Должно сработать:
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";
  }
}
Ответ написан
Комментировать
y0u
@y0u Куратор тега JavaScript
dev
Если лень разбираться, то там реализовано всё с помощью этого плагина - https://scrollmagic.io/
Пример: https://scrollmagic.io/examples/expert/image_seque...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы