Якорные элементы

Якорные элементы в AOS (Animate on Scroll) позволяют задавать анимацию для конкретных элементов страницы, основываясь на их видимости в окне браузера при прокрутке. Каждый элемент, который должен анимироваться, помечается специальным атрибутом data-aos. Пример базовой разметки:

<div data-aos="fade-up">
  Контент с анимацией при появлении
</div>

Здесь fade-up — тип анимации, который будет выполнен, когда элемент окажется в области видимости. Все анимации в AOS выполняются на основе прокрутки, поэтому важно правильно структурировать страницу, чтобы элементы появлялись постепенно.

Атрибуты якорных элементов

AOS поддерживает несколько ключевых атрибутов, которые контролируют поведение анимации:

  1. data-aos — задаёт тип анимации: fade, fade-up, fade-down, slide-up, zoom-in и другие.

  2. data-aos-offset — смещение в пикселях от нижней границы окна, после которого срабатывает анимация.

    <div data-aos="fade-left" data-aos-offset="200">Смещение 200px</div>

    При значении 200 анимация начнётся, когда элемент будет находиться на 200 пикселей выше нижней границы окна.

  3. data-aos-delay — задержка перед запуском анимации в миллисекундах.

    <div data-aos="zoom-in" data-aos-delay="300">Задержка 300ms</div>

  4. data-aos-duration — длительность анимации в миллисекундах.

    <div data-aos="fade-up" data-aos-duration="1000">Анимация 1 секунда</div>

  5. data-aos-easing — кривые ускорения анимации: linear, ease, ease-in, ease-out, ease-in-out.

    <div data-aos="fade-down" data-aos-easing="ease-in-out">Плавное появление</div>

  6. data-aos-anchor — задаёт якорный элемент, относительно которого рассчитывается позиция для запуска анимации.

    <div id="section1"></div>
<div data-aos="fade-up" data-aos-anchor="#section1">Анимация относительно section1</div>

    В этом случае элемент будет анимироваться не относительно окна браузера, а относительно позиции элемента с id="section1".

  7. data-aos-anchor-placement — точка запуска анимации относительно якоря: top-bottom, center-bottom, top-center и другие.

    <div data-aos="fade-right" data-aos-anchor="#section1" data-aos-anchor-placement="center-bottom">
  Анимация при центровке элемента относительно нижней границы якоря
</div>

Принципы работы якорей

Якорь — это элемент, относительно которого рассчитывается положение другого элемента для запуска анимации. Если якорь не задан, элемент анимируется по умолчанию относительно окна браузера. Использование якорей особенно важно при сложной верстке с секциями и параллакс-эффектами, когда визуальная последовательность элементов должна сохраняться независимо от высоты других блоков.

  1. Совмещение с offset — data-aos-offset можно использовать вместе с якорем для точной настройки момента появления анимации.
  2. Гибкая точка запуска — data-aos-anchor-placement позволяет управлять точкой отсчёта для анимации: начало, центр или конец якорного элемента.
  3. Несколько элементов на один якорь — несколько блоков можно анимировать относительно одного якоря, задавая каждому свой data-aos-delay и data-aos-duration.

Практические примеры

1. Анимация блока относительно секции

<section id="about">
  <h2>О нас</h2>
</section>

<div data-aos="fade-up" data-aos-anchor="#about" data-aos-anchor-placement="top-bottom">
  Контент, анимируемый при прокрутке к секции "О нас"
</div>

Здесь блок начнёт анимацию, когда верхняя граница секции #about будет доходить до нижней границы окна.

2. Цепочка анимаций

<div data-aos="fade-up" data-aos-delay="0">Первый блок</div>
<div data-aos="fade-up" data-aos-delay="200">Второй блок</div>
<div data-aos="fade-up" data-aos-delay="400">Третий блок</div>

Использование задержки позволяет создавать эффект последовательного появления элементов.

3. Анимация с пользовательским якорем и смещением

<section id="features"></section>

<div data-aos="zoom-in" data-aos-anchor="#features" data-aos-offset="150" data-aos-duration="800">
  Особенности продукта
</div>

Элемент начнёт увеличиваться, когда будет находиться на 150 пикселей выше нижней границы секции #features, длительность анимации — 800 мс.

Советы по использованию якорных элементов

  • Для однородных секций страницы рекомендуется использовать один якорь на секцию и настраивать разные блоки через data-aos-delay.
  • При работе с адаптивной версткой важно тестировать анимацию на разных размерах экрана, так как смещение (offset) и точка запуска (anchor-placement) могут вести себя иначе.
  • Сложные страницы с динамическим контентом требуют вызова метода AOS.refresh() после добавления новых элементов в DOM, чтобы библиотека корректно определила их позиции.
AOS.init({
  once: true, // анимация срабатывает один раз
});
AOS.refresh(); // обновление при динамических изменениях DOM

Итоговая структура якорного элемента

  1. data-aos — тип анимации.
  2. data-aos-offset — смещение запуска анимации.
  3. data-aos-delay — задержка анимации.
  4. data-aos-duration — длительность анимации.
  5. data-aos-easing — кривые ускорения.
  6. data-aos-anchor — элемент-ориентир для запуска анимации.
  7. data-aos-anchor-placement — точка запуска относительно якоря.

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

Оглавление