Hero-секции с анимацией

Для работы анимаций при скролле необходимо подключить библиотеку AOS. Существует два основных способа: через CDN или локально, скачав файлы библиотеки.

Через CDN:

Инициализация в Jav * aScript:

AOS.init({
  duration: 1200, // Длительность анимации в миллисекундах
  once: true,     // Анимация будет воспроизводиться только один раз
  mirror: false   // Анимация не повторяется при скролле вверх
});

Ключевые параметры:

  • duration – время анимации.
  • once – включение одноразовой анимации.
  • mirror – анимация повторяется при прокрутке обратно.
  • offset – смещение триггера от верхнего края окна, задается в пикселях.

Настройка Hero-секции

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

HTML-разметка


  

    
Добро пожаловать на сайт

    
Создаём впечатляющий первый экран

    Узнать больше
  

  

    Hero Image

Особенности:

  • data-aos="fade-up" – элемент плавно появляется снизу.
  • data-aos="zoom-in" – элемент увеличивается при появлении.
  • data-aos-delay="XXX" – задержка анимации в миллисекундах, позволяет создавать цепочку эффектов.

Управление порядком анимаций

Hero-секция обычно состоит из нескольких элементов, которые появляются последовательно. Для этого используются атрибуты data-aos-delay и data-aos-duration.

Заголовок


Описание

Кнопка
  • data-aos-delay контролирует задержку старта анимации относительно появления элемента на экране.
  • data-aos-duration задаёт длительность эффекта независимо от глобального параметра duration.

Комбинирование анимаций

Для Hero-секции хорошо работает комбинация различных типов анимаций:

  • fade-up / fade-down / fade-left / fade-right – плавное появление с движения.
  • zoom-in / zoom-out – увеличение или уменьшение масштаба.
  • flip-left / flip-right / flip-up / flip-down – эффект переворота.
  • slide-up / slide-down / slide-left / slide-right – скользящее появление.
Текст


Кнопка


Изображение

Рекомендации:

  • Сочетать не более 2–3 типов анимаций для одного экрана, чтобы не перегружать восприятие.
  • Использовать постепенные задержки, создавая визуальный поток.

Адаптивность и производительность

Анимации Hero-секции должны корректно работать на мобильных устройствах:

  • Параметр disable позволяет отключить анимацию для определённых устройств:
AOS.init({
  disable: 'mobile'
});
  • Для оптимизации лучше использовать одноразовую анимацию (once: true) и минимальные изображения, чтобы Hero загружался быстро.
  • Эффекты на фоне можно реализовать через data-aos с плавными transform и opacity, чтобы GPU ускоряла рендеринг.

Динамическое управление анимацией

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

// Перезапуск анимации
AOS.refresh();

// Изменение атрибута на лету
document.querySelector('.hero-content h1').setAttribute('data-aos', 'fade-down');
AOS.refreshHard();

Практические сценарии:

  • Изменение эффекта в зависимости от прокрутки.
  • Динамическое добавление элементов в Hero-секцию.
  • Создание интерактивного Hero с различными анимациями при наведении.

Интеграция с CSS

Хотя AOS управляет трансформациями через JavaScript, для Hero-секции важна синергия с CSS:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  padding: 0 50px;
  background: linear-gradient(120deg, #6a11cb, #2575fc);
}

.hero-content h1 {
  font-size: 3rem;
  color: #fff;
}

.hero-content p {
  font-size: 1.2rem;
  color: #f0f0f0;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: #fff;
  color: #2575fc;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

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

Оглавление