Бесконечный скролл

Библиотека ScrollMagic позволяет управлять анимациями и поведением элементов на странице в зависимости от прокрутки. Бесконечный скролл реализуется за счёт динамической подгрузки контента и привязки элементов к событиям прокрутки с помощью сцен (Scenes).

В ScrollMagic ключевыми объектами являются Controller и Scene. Контроллер управляет всей логикой прокрутки на странице, а сцена — отдельным триггером, который выполняет действия при достижении определённого положения страницы.

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

// Создание сцены
var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",  // элемент, при котором активируется сцена
  duration: 200,                // длительность действия сцены
  triggerHook: 0.9              // точка срабатывания (0 — верх экрана, 1 — низ)
})
.setClassToggle("#element", "visible")  // добавление класса элементу
.addTo(controller);

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

Динамическая подгрузка контента

Для подгрузки контента обычно используют AJAX-запросы или fetch API. Важно, чтобы после добавления нового блока на страницу его элементы были подключены к ScrollMagic.

function loadMoreContent() {
  fetch('/load-more')
    .then(response => response.text())
    .then(html => {
      const container = document.querySelector('#content');
      container.insertAdjacentHTML('beforeend', html);
      initScrollMagicForNewContent(html);
    });
}

function initScrollMagicForNewContent(html) {
  const newElements = document.querySelectorAll('.new-item');
  newElements.forEach(el => {
    new ScrollMagic.Scene({
      triggerElement: el,
      triggerHook: 0.8,
      duration: '100%'
    })
    .setClassToggle(el, 'active')
    .addTo(controller);
  });
}

В данном примере после получения HTML-блока новые элементы регистрируются как сцены, и анимации начинают работать на них без перезагрузки страницы.

Оптимизация работы при больших объёмах данных

Бесконечный скролл с ScrollMagic требует контроля количества активных сцен, так как слишком много сцен одновременно может замедлить работу страницы. Оптимальные решения:

  • Удаление сцен для элементов, которые уже вышли за пределы видимости:
scene.on("leave", function (event) {
  if (event.scrollDirection === "FORWARD") {
    controller.removeScene(event.target);
  }
});
  • Делегирование анимаций через общий контейнер вместо отдельных сцен для каждого элемента.
  • Использование requestAnimationFrame для плавной анимации и уменьшения нагрузки на рендер.

Настройка триггеров для бесконечного скролла

ScrollMagic позволяет гибко настраивать точки срабатывания:

  • triggerHook – определяет, в какой точке экрана активируется сцена (значение от 0 до 1).
  • offset – смещение триггера относительно верхней границы элемента.
  • duration – длительность сцены, может быть в пикселях или проценте от высоты окна.

Пример комбинации:

new ScrollMagic.Scene({
  triggerElement: '#nextBatch',
  triggerHook: 1,
  offset: -100,
  duration: 50
})
.on('enter', loadMoreContent)
.addTo(controller);

Сцена срабатывает за 100 пикселей до конца контейнера и загружает следующий блок контента.

Анимации элементов при появлении

Для создания эффектов «появления при скролле» используется setTween или интеграция с библиотекой GSAP:

new ScrollMagic.Scene({
  triggerElement: '.item',
  triggerHook: 0.9,
  duration: 200
})
.setTween(".item", { opacity: 1, y: 0, ease: "power1.out" })
.addTo(controller);

Такой подход позволяет плавно анимировать элементы при их динамическом появлении на странице.

Комбинирование бесконечного скролла с ленивой загрузкой изображений

Чтобы ускорить страницу и снизить нагрузку, рекомендуется использовать lazy loading вместе с ScrollMagic:

const lazyImages = document.querySelectorAll('img[data-src]');
new ScrollMagic.Scene({
  triggerElement: lazyImages[0],
  triggerHook: 1
})
.on('enter', () => {
  lazyImages.forEach(img => {
    if (!img.src) img.src = img.dataset.src;
  });
})
.addTo(controller);

Благодаря этому изображения загружаются только когда пользователь почти доскроллил до них, что экономит трафик и ресурсы браузера.

Поддержка мобильных устройств и адаптивность

На мобильных устройствах важно учитывать:

  • Высокую частоту событий scroll и возможные лаги.
  • Размер сцены относительно видимой области (window.innerHeight).
  • Возможность отключения анимаций на слабых устройствах:
if(window.innerWidth < 768){
  controller.enabled(false);
}

Эта проверка отключает ScrollMagic для маленьких экранов, снижая нагрузку.

Бесконечный скролл с ScrollMagic строится на трёх столпах: динамическая подгрузка контента, регистрация новых сцен и оптимизация производительности. Комбинирование этих техник позволяет создавать плавные и отзывчивые интерфейсы с большим объёмом данных.

Оглавление