Проверка корректности установки

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

Подключение ScrollMagic

Для работы ScrollMagic необходимо подключить два файла:

  1. Основной скрипт библиотеки ScrollMagic.min.js
  2. Дополнительно, при необходимости анимаций через GSAP — animation.gsap.min.js

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

Подключение можно производить как в <head>, так и перед закрывающим тегом </body>. Важно убедиться, что подключение происходит после загрузки всех зависимостей, таких как GSAP, если она используется для анимаций.

Создание базового контроллера

Контроллер в ScrollMagic управляет всеми сценами и следит за их состоянием в зависимости от скролла. Для проверки установки достаточно создать простой контроллер:

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

Если этот код не вызывает ошибок в консоли браузера, значит библиотека корректно загружена и готова к работе.

Создание тестовой сцены

Следующий шаг — создание минимальной сцены, чтобы проверить реагирование на скролл:

var scene = new ScrollMagic.Scene({
    duration: 200, // длина сцены в пикселях
    offset: 50     // смещение от верхней границы окна
})
.setClassToggle("#test-element", "visible") // добавление класса при достижении сцены
.addTo(controller); // добавление сцены в контроллер

В этом примере:

  • duration определяет, на сколько пикселей будет распространяться сцена.
  • offset задаёт начальное смещение сцены от верхней границы окна.
  • setClassToggle добавляет или убирает CSS-класс у указанного элемента (#test-element) при прохождении сцены.

После загрузки страницы и прокрутки элемента вниз на 50 пикселей, элемент с id="test-element" должен получить класс visible.

Проверка работы в браузере

  1. Открыть страницу в браузере.
  2. Открыть консоль разработчика (обычно клавиша F12 или Ctrl+Shift+I).
  3. Убедиться, что нет ошибок, связанных с ScrollMagic или Controller.
  4. Прокрутить страницу до тестового элемента и проверить, добавляется ли класс visible.

Если класс добавляется корректно, значит ScrollMagic успешно установлена и готова к дальнейшему использованию.

Дополнительные методы проверки

  • Метод .info() позволяет получить отладочную информацию о контроллере:
console.log(controller.info());

Выводит объект с данными о количестве сцен, положении скролла и текущем состоянии.

  • Отладочные индикаторы можно включить с помощью метода .addIndicators(). Это особенно полезно для визуальной проверки работы сцены:
scene.addIndicators({name: "Test Scene"});

Индикаторы показывают начало и конец сцены, длительность и текущее положение на странице.

Частые ошибки при установке

  • ScrollMagic не подключён — консоль выдаёт ScrollMagic is not defined.
  • Неправильный порядок подключения — если GSAP подключён после плагина animation.gsap.min.js, анимации не будут работать.
  • Несуществующий селектор элемента — .setClassToggle("#test-element", "visible") не сработает, если элемент с таким ID отсутствует в DOM.
  • Несовместимость с другими библиотеками — иногда сторонние плагины скролла могут блокировать ScrollMagic; рекомендуется проверять работу без них.

Резюме проверки

Корректная установка ScrollMagic гарантируется при соблюдении следующих условий:

  • Библиотека подключена корректно и загружается без ошибок.
  • Создан контроллер ScrollMagic.Controller.
  • Минимальная сцена реагирует на скролл и изменяет состояние тестового элемента.
  • Включённые индикаторы и отладочная информация подтверждают правильное функционирование.

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

Оглавление