Анимации увеличения zoom

Библиотека AOS (Animate on Scroll) позволяет легко добавлять анимации к элементам при прокрутке страницы. Одним из наиболее эффектных визуальных приёмов является анимация увеличения (zoom), которая создаёт ощущение динамики и глубины.

Анимация увеличения реализуется с помощью атрибута data-aos, которому присваивается значение zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right и их обратные варианты zoom-out, zoom-out-up и т.д. Каждый из вариантов задаёт направление и тип анимации.

<div data-aos="zoom-in">Элемент увеличивается при прокрутке</div>
<div data-aos="zoom-in-up">Элемент увеличивается и смещается вверх</div>
<div data-aos="zoom-out">Элемент уменьшается при прокрутке</div>

Настройка длительности анимации

В AOS можно управлять временем анимации с помощью атрибута data-aos-duration. Значение указывается в миллисекундах. По умолчанию длительность составляет 400 мс.

<div data-aos="zoom-in" data-aos-duration="1000">Медленное увеличение</div>
<div data-aos="zoom-in" data-aos-duration="300">Быстрое увеличение</div>
  • Медленные анимации создают эффект плавного появления и подчёркивают важность элемента.
  • Быстрые анимации усиливают динамику страницы, особенно при множественных элементах.

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

Для последовательного появления элементов используется data-aos-delay. Задержка указывается в миллисекундах и позволяет создавать цепочку эффектов.

<div data-aos="zoom-in" data-aos-delay="200">Первый элемент</div>
<div data-aos="zoom-in" data-aos-delay="400">Второй элемент</div>
<div data-aos="zoom-in" data-aos-delay="600">Третий элемент</div>
  • Атрибут data-aos-delay особенно полезен для списков, галерей и карточек продуктов.
  • Значения задержки должны быть кратными 100–200 мс для создания плавного визуального ритма.

Настройка масштаба и смещения

AOS использует CSS-трансформации для увеличения элементов. По умолчанию масштаб изменяется от 0.8 до 1 для zoom-in и от 1.2 до 1 для zoom-out. Для тонкой настройки используется кастомный CSS с селектором [data-aos].

[data-aos="zoom-in"] {
  transform: scale(0.7);
  transition: transform 1s ease-out;
}

[data-aos="zoom-out"] {
  transform: scale(1.3);
  transition: transform 0.8s ease-in;
}
  • scale(0.7) означает, что элемент изначально уменьшен на 30 % и увеличивается до стандартного размера.
  • scale(1.3) создаёт эффект, когда элемент постепенно уменьшается до исходного размера.

Настройка смещения и направления

Для вариаций zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right элемент одновременно увеличивается и смещается в заданном направлении. Смещение задаётся через transform: translateX/Y в CSS, а AOS добавляет плавность через transition.

[data-aos="zoom-in-up"] {
  transform: translateY(50px) scale(0.8);
}

[data-aos="zoom-in-left"] {
  transform: translateX(-50px) scale(0.8);
}
  • translateY(50px) перемещает элемент вниз перед анимацией.
  • translateX(-50px) перемещает элемент влево.
  • Масштаб и смещение вместе создают ощущение движения к зрителю или от него.

Повторение анимации и отключение на мобильных устройствах

Для повторного срабатывания анимации при повторной прокрутке используется атрибут data-aos-once="false".

<div data-aos="zoom-in" data-aos-once="false">Элемент анимируется повторно</div>
  • true (по умолчанию) — анимация выполняется только один раз.
  • false — элемент анимируется каждый раз, когда появляется в зоне видимости.

Для оптимизации мобильных устройств и снижения нагрузки можно отключить анимации с помощью data-aos-disable.

<div data-aos="zoom-in" data-aos-disable="true">Отключено на мобильных</div>

Комбинирование с другими эффектами

Анимации zoom могут комбинироваться с другими эффектами AOS:

  • fade – добавление прозрачности (fade-up, fade-down)
  • flip – поворот элемента по оси (flip-left, flip-right)
  • slide – скольжение элемента с краев (slide-up, slide-left)
<div data-aos="zoom-in" data-aos-anchor-placement="top-bottom" data-aos-delay="200">
  Элемент с комбинированным эффектом
</div>
  • Атрибут data-aos-anchor-placement задаёт момент запуска анимации относительно видимой части окна браузера (top-bottom, center-center, top-center).

Инициализация и глобальные настройки

Для работы анимаций zoom достаточно подключить библиотеку AOS и вызвать метод AOS.init(). Дополнительно можно задать глобальные параметры:

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

Практические советы по применению zoom-анимаций

  • Использовать zoom-in для акцента на важных блоках и заголовках.
  • Комбинировать с fade для более мягкого появления элементов.
  • Не применять слишком быстрый zoom-out для больших блоков — эффект может быть резким и отвлекающим.
  • Планировать последовательность появления элементов с помощью data-aos-delay для создания динамических секций.
  • Для элементов, которые находятся выше сгиба страницы, задавать меньшую задержку, чтобы анимация была естественной.

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

Оглавление