Параметр offset

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

Определение и синтаксис

Параметр offset указывается в пикселях и задается при инициализации AOS или через атрибут data-aos-offset для конкретного элемента:

AOS.init({
  offset: 120, // Значение в пикселях
});

или для отдельного элемента:


  Контент

Здесь 120px и 200px обозначают смещение от верхней границы окна, после которого элемент начнёт анимацию.

Принцип работы

  • Значение offset определяет точку срабатывания анимации.
  • Когда верхняя граница элемента пересекает горизонтальную линию окна просмотра, отстоящую на offset пикселей от верхнего края окна, анимация запускается.
  • Меньшее значение offset означает, что анимация произойдёт ближе к верхней границе экрана, большее — позже, когда элемент будет глубже видим.

Например:

  • offset: 0 — анимация срабатывает сразу, как элемент становится видимым.
  • offset: 300 — элемент появится на экране, но анимация сработает только после того, как верхняя граница окна просмотра окажется на 300 пикселей выше элемента.

Глобальная и локальная настройка

  1. Глобальная настройка применяется при инициализации AOS и влияет на все элементы с анимациями:
AOS.init({
  offset: 150,
  duration: 800,
});
  1. Локальная настройка через data-aos-offset позволяет задавать уникальное смещение для отдельных элементов, что особенно полезно при сложных макетах:
Блок 1


Блок 2

В данном примере блок 1 анимируется раньше блока 2, несмотря на одинаковую анимацию.

Влияние на UX и производительность

  • Правильно подобранное значение offset улучшает восприятие интерфейса, позволяя пользователю видеть анимации в естественный момент прокрутки.
  • Слишком маленький offset может создавать резкие появления элементов, а слишком большой — анимация может срабатывать слишком поздно, вызывая ощущение отставания.
  • Не рекомендуется задавать слишком большое значение offset для элементов, расположенных низко на странице, чтобы не увеличивать задержку анимации.

Совместимость с другими параметрами

  • duration — задаёт длительность анимации, при этом offset только определяет момент старта.
  • delay — задержка перед началом анимации; offset не влияет на эту задержку, но определяет, когда таймер задержки запускается.
  • once — параметр, определяющий повторное срабатывание анимации; offset остаётся действительным для каждого нового показа элемента, если once: false.

Пример комбинированной настройки:

AOS.init({
  offset: 200,
  duration: 600,
  delay: 100,
  once: true
});

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

  • Для стандартного контента страницы (текст, изображения) оптимальным считается offset в диапазоне 120–250px.
  • Для больших секций с важной визуальной информацией можно использовать увеличенное смещение, чтобы анимация запускалась только после полного появления блока в зоне внимания.
  • При адаптивной верстке стоит проверять поведение offset на разных разрешениях, так как меньший экран может изменить восприятие точки старта анимации.

Выводы по использованию offset

  • Параметр offset — это инструмент точной настройки момента старта анимации.
  • Использование глобального и локального offset позволяет создавать гибкие и динамичные интерфейсы.
  • Корректное значение повышает комфорт пользователя и делает анимацию естественной, не отвлекающей от контента.
Оглавление