Создание собственных анимаций

Для начала работы с библиотекой AOS необходимо подключить её к проекту. Библиотека распространяется через CDN или npm-пакет. После подключения важно вызвать метод инициализации AOS.init(), который активирует отслеживание элементов при скролле.

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

Ключевые параметры и их значение:

  • duration — задаёт время, за которое элемент полностью анимируется.
  • easing — определяет кривую изменения скорости (linear, ease, ease-in, ease-out).
  • once — указывает, будет ли анимация повторяться при повторном скролле.
  • offset — величина смещения от точки видимости, при которой анимация активируется.

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

Элементы анимируются с помощью атрибутов data-aos в HTML. Основные встроенные эффекты включают: fade, fade-up, fade-down, flip-left, zoom-in и другие.

<div data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
  Контент с анимацией
</div>

Атрибуты для индивидуальной настройки анимации:

  • data-aos-duration — переопределяет глобальную длительность для конкретного элемента.
  • data-aos-delay — задаёт задержку перед запуском анимации.
  • data-aos-offset — смещение триггера для конкретного элемента.
  • data-aos-easing — локальная кривая ускорения/замедления.

Создание собственных анимаций через CSS

AOS позволяет использовать собственные эффекты, создавая CSS-анимации и привязывая их к классам с помощью data-aos.

  1. Определение CSS-анимации:
@keyframes slide-fade {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.my-slide-fade {
  animation-name: slide-fade;
  animation-fill-mode: both;
}
  1. Привязка к AOS:
<div data-aos="my-slide-fade">
  Элемент с кастомной анимацией
</div>
  1. Настройка длительности и задержки через AOS работает аналогично встроенным эффектам (data-aos-duration, data-aos-delay).

Комбинирование нескольких эффектов

Для более сложных эффектов можно объединять несколько CSS-анимаций. Важно учитывать, что каждая анимация должна иметь уникальное имя и соответствующую настройку animation-fill-mode: both, чтобы сохранялся конечный вид элемента после завершения анимации.

@keyframes rotate-fade {
  0% {
    opacity: 0;
    transform: rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

.rotate-fade {
  animation-name: rotate-fade;
  animation-fill-mode: both;
  animation-duration: 1s;
}
<div data-aos="rotate-fade" data-aos-delay="500">
  Комбинированная анимация
</div>

Использование событий AOS для динамических эффектов

Библиотека предоставляет события, которые позволяют запускать кастомный JavaScript при активации анимации:

  • aos:in — элемент вошёл в видимую область.
  • aos:out — элемент вышел из видимой области.
document.addEventListener('aos:in', ({ detail }) => {
  if(detail.classList.contains('special')) {
    console.log('Элемент special появился на экране');
  }
});

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

Создание адаптивных анимаций

Для разных устройств можно использовать медиазапросы и условную активацию анимации через JavaScript. Например, отключать сложные анимации на мобильных устройствах:

if(window.innerWidth > 768) {
  AOS.init({ duration: 1000, once: true });
}

Также можно динамически менять data-aos атрибуты в зависимости от ширины экрана или других условий:

const elements = document.querySelectorAll('.responsive-animation');
elements.forEach(el => {
  el.setAttribute('data-aos', window.innerWidth > 1024 ? 'fade-up' : 'fade');
});

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

  • Ограничивать количество одновременно анимируемых элементов.
  • Использовать once: true для тяжелых эффектов, чтобы анимация не повторялась при каждом скролле.
  • Минимизировать использование сложных CSS-трансформаций на мобильных устройствах.
  • Анимации с opacity и transform менее ресурсоёмкие, чем width или height.

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

Оглавление