Как реализовать параллельный скролл в блоке?

Для реализации параллельного скроллинга в блоке с использованием JavaScript, можно воспользоваться различными подходами. Один из самых популярных способов - это использование библиотеки, такой как ScrollMagic или Scrollama.

Для примера, рассмотрим как реализовать параллельный скроллинг с использованием библиотеки ScrollMagic.

Шаг 1: Подключение библиотеки
Сначала необходимо включить в проект библиотеку ScrollMagic. Вы можете скачать ее с официального сайта или использовать CDN ссылку. Вам также понадобится библиотека jQuery.

Пример подключения:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

Шаг 2: Создание HTML разметки и CSS стилей
Создайте контейнер, в котором будет происходить скроллинг, и несколько элементов внутри него. Разместите элементы на разных уровнях, чтобы создать эффект параллельного движения.

Пример HTML:

<div class="parallax-container">
  <div class="parallax-item item1"></div>
  <div class="parallax-item item2"></div>
  <div class="parallax-item item3"></div>
</div>

Пример CSS:

.parallax-container {
  height: 100vh;
  overflow: hidden;
}

.parallax-item {
  position: relative;
  height: 100vh;
}

.item1 {
  background: red;
}

.item2 {
  background: green;
}

.item3 {
  background: blue;
}

Шаг 3: Инициализация ScrollMagic контроллера и сцены
В JavaScript коде, после того как DOM загрузится, необходимо инициализировать ScrollMagic контроллер и создать сцену для параллельного скроллинга.

Пример кода:

$(document).ready(function() {
  // Создание ScrollMagic контроллера
  var controller = new ScrollMagic.Controller();

  // Создание сцены
  new ScrollMagic.Scene({
    triggerElement: ".parallax-container",
    triggerHook: "onEnter",
    duration: "200%"
  })
  .setTween(".parallax-item", {y: "80%", ease: Power0.easeNone})
  .addTo(controller);
});

В данном примере, мы создаем сцену, которая начинается при входе в контейнер с классом ".parallax-container" и имеет длительность в 200% высоты контейнера. Затем, мы задаем анимацию для элементов с классом ".parallax-item", смещая их по вертикали на 80%.

Шаг 4: Запуск скроллинга
Когда вы запустите страницу, параллельное скроллирование будет работать. При прокрутке страницы вверх или вниз, элементы внутри контейнера будут анимированно двигаться в противоположном направлении.

Итак, это всего лишь один из методов реализации параллельного скроллинга с использованием JavaScript и библиотеки ScrollMagic. В зависимости от ваших требований и предпочтений, вы можете выбрать другой подход или библиотеку для реализации этой функциональности.