Минимальный рабочий пример

Для начала работы с библиотекой AOS (Animate on Scroll) необходимо подключить её CSS и JavaScript файлы. Существует два основных способа: через CDN или локально, скачав файлы библиотеки.

Через CDN:

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

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

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

Инициализация AOS

После подключения файлов необходимо инициализировать библиотеку. Для этого используется функция AOS.init(), которую обычно помещают в конец тела документа или внутри события DOMContentLoaded:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    AOS.init();
  });
</script>

Инициализация может содержать настройки, влияющие на поведение анимаций:

AOS.init({
  offset: 120,        // смещение по вертикали до запуска анимации (px)
  delay: 0,           // задержка перед анимацией (ms)
  duration: 400,      // длительность анимации (ms)
  easing: 'ease',     // тип easing анимации
  once: false,        // воспроизводить анимацию только один раз
  mirror: false,      // повторять анимацию при прокрутке вверх
});

Добавление анимации к элементу

Чтобы элемент анимировался при появлении в области видимости, достаточно добавить к нему атрибут data-aos с указанием типа анимации:

<div data-aos="fade-up">
  Появление снизу с плавным эффектом
</div>

<div data-aos="zoom-in" data-aos-duration="800">
  Увеличение с задержкой 800ms
</div>

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

  • data-aos – задаёт тип анимации (fade, fade-up, fade-down, zoom-in, flip-left и другие).
  • data-aos-duration – индивидуальная длительность анимации для конкретного элемента.
  • data-aos-delay – задержка перед началом анимации.
  • data-aos-offset – смещение триггера появления элемента относительно окна просмотра.

Полезные атрибуты для контроля анимации

  1. data-aos-delay – задержка анимации в миллисекундах.
<div data-aos="fade-right" data-aos-delay="300">
  Появление с задержкой 300ms
</div>
  1. data-aos-duration – длительность анимации, позволяющая задавать плавность.
<div data-aos="flip-left" data-aos-duration="1000">
  Поворот с длительностью 1 секунда
</div>
  1. data-aos-offset – расстояние от верхней границы окна до элемента для запуска анимации.
<div data-aos="fade-up" data-aos-offset="200">
  Анимация с ранним срабатыванием
</div>
  1. data-aos-once – флаг, указывающий, запускать анимацию один раз или при каждом появлении элемента в области видимости.
<div data-aos="fade-down" data-aos-once="true">
  Появление только один раз
</div>

Организация HTML-структуры

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

<section>
  <div data-aos="fade-up" data-aos-delay="0">Блок 1</div>
  <div data-aos="fade-up" data-aos-delay="200">Блок 2</div>
  <div data-aos="fade-up" data-aos-delay="400">Блок 3</div>
</section>

Такой подход создаёт эффект поочерёдного появления элементов при скролле.

Минимальный рабочий пример

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Минимальный пример AOS</title>
  <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
    }
    div.box {
      background-color: #3498db;
      color: #fff;
      padding: 50px;
      margin-bottom: 20px;
      text-align: center;
      font-size: 1.5rem;
    }
  </style>
</head>
<body>

  <div class="box" data-aos="fade-up">Блок 1</div>
  <div class="box" data-aos="fade-up" data-aos-delay="200">Блок 2</div>
  <div class="box" data-aos="fade-up" data-aos-delay="400">Блок 3</div>

  <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
  <script>
    AOS.init({
      duration: 800,
      once: true
    });
  </script>
</body>
</html>

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

  • Каждый блок плавно появляется снизу при прокрутке.
  • Используются индивидуальные задержки, создающие эффект последовательного появления.
  • Анимации воспроизводятся один раз благодаря опции once: true.

Дополнительные советы

  • Комбинирование анимаций: Можно использовать разные типы анимаций для различных блоков на странице.
  • Оптимизация производительности: Для большого количества анимированных элементов рекомендуется использовать once: true, чтобы анимации не срабатывали повторно при скролле.
  • Адаптивность: Проверять анимации на разных разрешениях экрана, так как смещение offset может требовать корректировки для мобильных устройств.

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

Оглавление