Snap-эффект между секциями

Snap-эффект в библиотеке ScrollMagic используется для автоматического “прилипания” скролла к определённым точкам страницы. Обычно это удобно при создании лендингов с секциями или эффектами параллакса, где после завершения прокрутки скролл автоматически фиксируется на ближайшей секции. Это создаёт ощущение плавной и контролируемой навигации.

В ScrollMagic snap реализуется через комбинацию Controller, Scene и параметров duration и triggerHook, а также с помощью плагина scrollTo или вспомогательных библиотек для анимации прокрутки.

Настройка Controller с Snap

var controller = new ScrollMagic.Controller({
    vertical: true,
    globalSceneOptions: {
        triggerHook: 0
    }
});
  • vertical: определяет вертикальный скролл страницы.
  • globalSceneOptions.triggerHook: указывает точку на экране, при которой активируется сцена. Значение 0 соответствует верхней границе окна.

Snap-эффект будет работать корректно, если triggerHook установлен на начало или конец секции, чтобы прокрутка фиксировалась на нужной позиции.

Создание сцены с Snap

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "100%", 
    offset: 0
})
.setPin("#section1")
.addTo(controller);
  • triggerElement: элемент, от которого начинается сцена.
  • duration: длительность сцены, может быть задана в пикселях или в процентах от высоты окна.
  • offset: смещение начала сцены относительно triggerElement.
  • setPin: фиксирует элемент на месте во время прокрутки.

Snap-эффект обычно используется вместе с setPin, чтобы после прокрутки скролл “прилипал” к следующей секции.

Использование scrollTo для плавного перехода

Для корректного snap-эффекта нужно использовать функцию прокрутки scrollTo. В ScrollMagic она интегрируется через Controller:

controller.scrollTo(function(target) {
    TweenMax.to(window, 0.5, {
        scrollTo: {y: target},
        ease: Power2.easeOut
    });
});
  • TweenMax: библиотека анимации для плавного скролла.
  • scrollTo: объект с координатой y, к которой нужно прокрутить.
  • ease: плавность анимации.

После этого можно программно прокручивать страницу к любой секции, обеспечивая snap-эффект.

Привязка Snap к событиям ScrollMagic

Snap можно реализовать на событиях end сцены, чтобы после завершения прокрутки страница автоматически фиксировалась:

scene.on("end", function(event) {
    var scrollPos = window.scrollY;
    var sectionOffset = event.target.triggerElement().offsetTop;
    
    controller.scrollTo(sectionOffset);
});
  • event.target.triggerElement().offsetTop: позиция верхней границы секции.
  • window.scrollY: текущая позиция скролла.
  • controller.scrollTo: плавно прокручивает к ближайшей секции.

Такая реализация обеспечивает точное “прилипание” к секции после завершения прокрутки пользователем.

Snap между несколькими секциями

Для страниц с множеством секций можно создать массив элементов и динамически навешивать сцены:

var sections = document.querySelectorAll(".section");

sections.forEach(function(section) {
    new ScrollMagic.Scene({
        triggerElement: section,
        duration: "100%"
    })
    .setPin(section)
    .addTo(controller)
    .on("end", function() {
        controller.scrollTo(section.offsetTop);
    });
});
  • querySelectorAll(“.section”): выбирает все секции.
  • forEach: создает отдельную сцену для каждой секции.
  • on(“end”): событие завершения сцены для snap.

Важные рекомендации

  1. Высота секций: snap работает корректно, если высота секций близка к высоте окна.
  2. Длительность сцены: слишком большая duration может замедлять snap-эффект.
  3. Плавность анимации: использование TweenMax или GSAP обеспечивает более естественный переход между секциями.
  4. Совместимость с мобильными устройствами: проверять работу snap на разных разрешениях экрана, так как динамическая высота секций может влиять на позиционирование.

Snap-эффект в ScrollMagic — мощный инструмент для создания лендингов и интерактивных интерфейсов с фиксированными секциями, позволяющий контролировать скролл и обеспечивать плавный переход между элементами страницы.

Оглавление