JS Parallax: Create stunning interactive backgrounds with ease

JavaScript parallax - это эффект, при котором объекты на веб-странице движутся с разной скоростью, создавая иллюзию глубины и добавляя интерактивности к сайту. В основе этого эффекта лежит изменение позиции объекта в зависимости от положения скролла пользователя.

Для создания parallax-эффекта в JavaScript существует несколько подходов, рассмотрим два из них:

1. Использование CSS-свойства background-position

В этом подходе объекты разделены на слои, каждому из которых присваивается разная скорость движения. Для создания эффекта, нам понадобится определить покоординатное положение объекта в зависимости от прокрутки страницы.

HTML:

html

CSS:

css
.parallax-bg {
  background-image: url('parallax-image.jpg');
  background-position: 50% 0;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

JavaScript:

javascript
window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var parallaxBg = document.querySelector('.parallax-bg');
  var yPos = scrollTop / 2; // определяем скорость движения объекта
  parallaxBg.style.backgroundPosition = '50% ' + yPos + 'px'; // изменяем позицию объекта
});

2. Использование transform: translate

В этом подходе объекты перемещаются с помощью свойства transform: translate. Координаты объекта вычисляются на основе положения скролла и заданных коэффициентов движения объекта.

HTML:

html

CSS:

css
.parallax-bg {
  background-image: url('parallax-image.jpg');
  background-size: cover;
  height: 100vh;
  transform: translate(0, 0);
}

JavaScript:

javascript
window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var parallaxBg = document.querySelector('.parallax-bg');
  var yPos = scrollTop * 0.4; // задаем коэффициент движения объекта
  parallaxBg.style.transform = 'translate(0, ' + yPos + 'px)'; // изменяем позицию объекта
});

В обоих примерах приведенных выше, объект с классом "parallax-bg" будет двигаться с разной скоростью при прокрутке страницы. Вы можете настроить скорость объектов, изменяя значения переменных yPos или коэффициента движения в соответствующем примере.