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

Для того чтобы библиотека AOS (Animate on Scroll) корректно работала в проекте, необходимо убедиться в правильности её подключения. Неправильное подключение скриптов или стилей является одной из самых распространённых причин некорректного отображения анимаций.

Подключение CSS и JS

AOS требует два основных ресурса: CSS для стилей анимаций и JS для управления поведением. Стандартная схема подключения выглядит следующим образом:

<!-- AOS CSS -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

<!-- AOS JS -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

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

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

Инициализация библиотеки

После подключения файлов необходимо инициализировать AOS с помощью вызова:

AOS.init();

Можно использовать дополнительные параметры, например:

AOS.init({
  offset: 120,       // смещение по вертикали для срабатывания анимации
  duration: 600,     // длительность анимации в миллисекундах
  easing: 'ease-in-out', // функция плавности
  once: true,        // анимация срабатывает только один раз
});

Если вызов AOS.init() не выполнен, эффекты не будут работать, даже если CSS и JS подключены корректно.

Проверка наличия файлов

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

  1. Открыть консоль разработчика (F12) и проверить вкладку Network на наличие загруженных файлов aos.css и aos.js.

  2. Убедиться, что статус файлов — 200 OK, а не ошибка 404.

  3. Проверить вкладку Console на наличие ошибок JavaScript. Частые сообщения:

    • AOS is not defined — JS не подключен или подключен после вызова AOS.init().
    • Ошибки типа Failed to load resource — неправильный путь к файлу.

Проверка работы анимаций

Для визуальной проверки можно добавить тестовый элемент с атрибутом data-aos:

<div data-aos="fade-up">
  Тестовая анимация
</div>

При скролле страницы этот элемент должен плавно появляться с эффектом fade-up. Если анимация не срабатывает:

  • Проверить, применён ли CSS класс .aos-animate при прокрутке. Его отсутствие указывает на проблемы с инициализацией.
  • Убедиться, что скрипт вызывается после полной загрузки DOM или использовать DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
  AOS.init();
});

Конфликты с другими библиотеками

Иногда AOS может конфликтовать с другими скриптами, которые управляют прокруткой, например, Smooth Scroll или кастомные обработчики scroll. В таких случаях:

  • Проверить порядок подключения скриптов: сначала AOS, затем другие скрипты.
  • Убедиться, что другие скрипты не отменяют события scroll, так как это препятствует запуску анимаций.

Отладка через классы и атрибуты

Каждому элементу, на который применяется анимация, AOS добавляет следующие классы:

  • aos-init — указывает, что элемент зарегистрирован для анимации.
  • aos-animate — появляется при срабатывании анимации.

Если класс aos-init присутствует, а aos-animate не добавляется при скролле:

  • Проверить параметры offset и duration, они могут быть слишком большими или малыми для видимой зоны.
  • Проверить CSS свойства overflow родительских элементов, так как скрытая прокрутка может блокировать событие scroll.

Итоговые рекомендации

  1. Подключать CSS и JS перед инициализацией.
  2. Вызывать AOS.init() после загрузки DOM.
  3. Проверять консоль на ошибки и наличие загруженных файлов.
  4. Тестировать на простых элементах с атрибутами data-aos.
  5. Проверять наличие классов aos-init и aos-animate для диагностики проблем.

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

Оглавление