Контрольные точки для разных экранов

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

1. Основы контрольных точек

В ScrollMagic каждая сцена (Scene) может иметь параметр triggerElement — DOM-элемент, при достижении которого запускается сцена, и triggerHook — положение на экране, где активируется триггер.

Пример базовой сцены:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
  triggerElement: "#section1",
  triggerHook: 0.5 // срабатывание в середине экрана
})
.setClassToggle("#section1", "visible")
.addTo(controller);

Здесь triggerHook: 0.5 означает, что сцена активируется, когда верхняя граница #section1 достигает 50% высоты окна.

2. Динамическая настройка для разных экранов

Чтобы сцена корректно работала на разных устройствах, важно адаптировать triggerHook, offset и другие параметры. Для этого часто используется проверка ширины окна через window.innerWidth или медиазапросы в JS:

var triggerHookValue;

if (window.innerWidth < 768) {
    triggerHookValue = 0.7; // для мобильных
} else if (window.innerWidth < 1200) {
    triggerHookValue = 0.5; // для планшетов
} else {
    triggerHookValue = 0.3; // для десктопов
}

var scene = new ScrollMagic.Scene({
    triggerElement: "#section2",
    triggerHook: triggerHookValue
})
.setClassToggle("#section2", "active")
.addTo(controller);

Использование динамического triggerHook обеспечивает корректное срабатывание анимаций независимо от высоты экрана.

3. Параметр offset для точной настройки

offset позволяет смещать момент активации сцены относительно верхней границы триггер-элемента:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section3",
    triggerHook: 0.5,
    offset: -50 // активировать на 50px раньше
})
.setClassToggle("#section3", "visible")
.addTo(controller);

Комбинация triggerHook и offset делает контрольные точки максимально точными на любых экранах.

4. Адаптивные анимации с функциями

Для сложных проектов можно использовать функцию для вычисления параметров сцены на лету:

function getTriggerHook() {
    if (window.innerWidth < 768) return 0.8;
    if (window.innerWidth < 1200) return 0.6;
    return 0.4;
}

var scene = new ScrollMagic.Scene({
    triggerElement: "#section4",
    triggerHook: getTriggerHook()
})
.setClassToggle("#section4", "visible")
.addTo(controller);

Такой подход позволяет централизованно управлять адаптивностью без дублирования кода для разных разрешений.

5. Использование медиазапросов внутри JS

Для более сложных условий удобно применять объект window.matchMedia:

var mqMobile = window.matchMedia("(max-width: 767px)");
var mqTablet = window.matchMedia("(min-width: 768px) and (max-width: 1199px)");

var triggerHookValue;

if (mqMobile.matches) {
    triggerHookValue = 0.8;
} else if (mqTablet.matches) {
    triggerHookValue = 0.6;
} else {
    triggerHookValue = 0.4;
}

var scene = new ScrollMagic.Scene({
    triggerElement: "#section5",
    triggerHook: triggerHookValue
})
.setClassToggle("#section5", "visible")
.addTo(controller);

Использование matchMedia делает код более читаемым и гибким, особенно при необходимости поддерживать множество разрешений.

6. Пересоздание сцен при изменении размеров окна

Для корректной работы анимаций при изменении размера окна важно пересоздавать сцены или обновлять их параметры:

window.addEventListener("resize", function() {
    scene.triggerHook(getTriggerHook());
    scene.refresh(); // пересчитывает позицию триггера
});

Метод refresh() гарантирует, что ScrollMagic правильно пересчитает положение триггеров после изменения размера окна или динамической загрузки контента.

7. Практические рекомендации

  • Для мобильных экранов часто стоит смещать triggerHook ниже, чтобы сцена срабатывала ближе к середине или нижней части экрана.
  • Для больших экранов можно ускорять активацию, используя меньшие значения triggerHook.
  • Для блоков с динамическим контентом важно использовать scene.refresh() после изменения высоты элементов.
  • Комбинация offset и адаптивного triggerHook позволяет добиться точного визуального эффекта на всех устройствах.

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

Оглавление