Анимированные формы

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

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

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

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

Параметры duration, easing, once и mirror позволяют гибко настраивать поведение анимаций по всему сайту.

Основные атрибуты для анимации элементов

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

<div data-aos="fade-up">Пример текста с анимацией fade-up</div>

Основные типы анимаций:

  • fade – плавное появление элемента:

    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left

  • flip – переворот элемента:

    • flip-left
    • flip-right
    • flip-up
    • flip-down

  • zoom – увеличение или уменьшение:

    • zoom-in
    • zoom-in-up
    • zoom-out

  • slide – скольжение элемента:

    • slide-up
    • slide-down
    • slide-left
    • slide-right

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

<div data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300" data-aos-offset="100">
  Анимированный элемент с кастомными настройками
</div>
  • data-aos-duration – длительность анимации в миллисекундах
  • data-aos-delay – задержка перед началом анимации
  • data-aos-offset – смещение от верхнего края окна, при котором начинается анимация

Управление последовательностью анимаций

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

<div data-aos="fade-right" data-aos-delay="0">Элемент 1</div>
<div data-aos="fade-right" data-aos-delay="200">Элемент 2</div>
<div data-aos="fade-right" data-aos-delay="400">Элемент 3</div>

Такой подход делает интерфейс более динамичным и привлекает внимание к важным блокам информации.

Анимации сложных форм и SVG

Библиотека AOS отлично работает не только с блоками текста и изображениями, но и с SVG-элементами или сложными формами. Для этого необходимо использовать атрибуты data-aos на контейнере и на отдельных частях SVG:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" data-aos="zoom-in"></circle>
  <rect x="50" y="50" width="100" height="100" fill="red" data-aos="fade-left"></rect>
</svg>

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

События AOS для динамического контроля

AOS предоставляет события, которые можно использовать для запуска дополнительных скриптов при появлении элементов на экране:

document.addEventListener('aos:in', ({ detail }) => {
  console.log('Элемент появился:', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('Элемент ушел с экрана:', detail);
});

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

Советы по производительности

  1. Минимизировать количество анимируемых элементов – большое количество одновременных анимаций может снижать FPS.
  2. Использовать once: true для статичных элементов – если анимация должна срабатывать только один раз, это снизит нагрузку при повторных скроллах.
  3. Комбинировать с CSS-анимациями – для некоторых эффектов достаточно использовать @keyframes, а AOS использовать только для триггера появления элемента.

Примеры сложных композиций

Для создания эффектных блоков можно комбинировать несколько типов анимаций и задержек:

<section class="features">
  <div data-aos="fade-up" data-aos-delay="0">Фича 1</div>
  <div data-aos="flip-left" data-aos-delay="200">Фича 2</div>
  <div data-aos="zoom-in" data-aos-delay="400">Фича 3</div>
  <div data-aos="slide-right" data-aos-delay="600">Фича 4</div>
</section>

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

Совместимость с фреймворками

AOS легко интегрируется с любыми современными фреймворками:

  • React – установка через npm и использование useEffect для инициализации:

    import AOS from 'aos';
import 'aos/dist/aos.css';

useEffect(() => {
  AOS.init({ duration: 1000 });
}, []);

  • Vue – подключение через плагин или в mounted:

    import AOS from 'aos';
import 'aos/dist/aos.css';

mounted() {
  AOS.init({ once: true });
}

  • Angular – инициализация в ngAfterViewInit():

    import * as AOS from 'aos';

ngAfterViewInit() {
  AOS.init({ duration: 1200 });
}

Это обеспечивает возможность создавать кросс-платформенные анимированные интерфейсы без потери производительности.

Оглавление