Подключение через CDN

ScrollMagic — это мощная библиотека для управления анимациями при прокрутке страницы. Один из самых быстрых способов начать работу с ней — подключение через CDN (Content Delivery Network). Это позволяет использовать библиотеку без установки через npm или загрузки локальных файлов.

Подключение основного скрипта

Для работы ScrollMagic требуется подключить основной JavaScript-файл. Наиболее популярные CDN-сервисы предоставляют доступ к последней стабильной версии библиотеки. Пример подключения через jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/scrollmagic@2.0.8/scrollmagic/minified/ScrollMagic.min.js"></script>

Ключевые моменты:

  • Используется минимизированная версия (ScrollMagic.min.js) для уменьшения времени загрузки.
  • Версия указывается явно (2.0.8) для стабильности проекта.
  • Скрипт лучше подключать перед закрывающим тегом </body> или после подключения необходимых зависимостей, чтобы DOM успел прогрузиться.

Подключение плагинов

ScrollMagic имеет несколько официальных плагинов, расширяющих функциональность. Наиболее часто используется плагин animation.gsap, позволяющий интегрировать GSAP-анимации с ScrollMagic:

<script src="https://cdn.jsdelivr.net/npm/scrollmagic@2.0.8/scrollmagic/minified/plugins/animation.gsap.min.js"></script>

Для работы с индикаторами сцен можно подключить debug.addIndicators:

<script src="https://cdn.jsdelivr.net/npm/scrollmagic@2.0.8/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>

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

Интеграция с CSS и GSAP

Для анимаций с ScrollMagic часто используют GSAP. В случае подключения через CDN добавляется скрипт GSAP:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>

После подключения GSAP и ScrollMagic с плагином animation.gsap создается сцена с анимацией:

<script>
  const controller = new ScrollMagic.Controller();

  const tween = gsap.to(".box", { duration: 1, x: 300, rotation: 360 });

  const scene = new ScrollMagic.Scene({
    triggerElement: ".trigger",
    duration: 500,
    triggerHook: 0.5
  })
  .setTween(tween)
  .addIndicators({ name: "box animation" })
  .addTo(controller);
</script>

Объяснение кода:

  • ScrollMagic.Controller() управляет всеми сценами на странице.
  • ScrollMagic.Scene задает условия для анимации: элемент-триггер, продолжительность действия (duration), точку срабатывания (triggerHook).
  • .setTween(tween) связывает GSAP-анимацию с сценой.
  • .addIndicators() добавляет визуальные маркеры для отладки.

Использование defer и async

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

<script src="https://cdn.jsdelivr.net/npm/scrollmagic@2.0.8/scrollmagic/minified/ScrollMagic.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/scrollmagic@2.0.8/scrollmagic/minified/plugins/animation.gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" defer></script>

Разница между async и defer:

  • async — скрипт загружается параллельно, выполнение происходит сразу после загрузки, что может нарушить порядок.
  • defer — скрипт загружается параллельно, но выполняется в порядке подключения после полной загрузки DOM.

Преимущества подключения через CDN

  • Быстрая интеграция: не требуется установка пакетов через npm.
  • Стабильная версия: можно зафиксировать версию и избежать неожиданных изменений.
  • Кэширование браузером: популярные CDN часто используют глобальное кэширование, ускоряя загрузку для пользователей.
  • Отсутствие локальных файлов: упрощается структура проекта и уменьшается вес репозитория.

Советы по подключению

  1. Подключать ScrollMagic после загрузки DOM или с атрибутом defer.
  2. Всегда указывать версию для стабильности проекта.
  3. Подключать плагины строго после основного скрипта.
  4. Для работы с GSAP использовать официальный плагин animation.gsap.
  5. Для отладки и разработки полезно использовать debug.addIndicators.

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

Оглавление