Атрибут data-aos-duration

Атрибут data-aos-duration является одним из ключевых свойств библиотеки AOS (Animate on Scroll), позволяющим контролировать длительность анимации элементов при скролле. Он задаёт время, за которое элемент достигает конечного состояния анимации, и измеряется в миллисекундах. По умолчанию большинство анимаций в AOS имеют стандартную длительность 400 мс, но с помощью data-aos-duration её можно легко изменить для каждого отдельного элемента.

Синтаксис

<div data-aos="fade-up" data-aos-duration="1000">
  Контент с анимацией
</div>
  • data-aos — задаёт тип анимации, например, fade-up, fade-down, zoom-in.
  • data-aos-duration — указывает продолжительность анимации в миллисекундах. В примере выше анимация будет длиться 1 секунду.

Принципы работы

  1. Локальное управление временем анимации Атрибут применяется к конкретному элементу, что позволяет устанавливать разную длительность анимации для разных блоков на одной странице.

  2. Переопределение глобальных настроек Если при инициализации AOS в AOS.init() указано значение duration, оно будет глобальным по умолчанию, но любое значение data-aos-duration для элемента имеет приоритет и переопределяет глобальное.

  3. Единицы измерения Все значения задаются в миллисекундах. Например:

    • data-aos-duration="500" — анимация 0.5 секунды
    • data-aos-duration="2000" — анимация 2 секунды

Практические примеры

Пример 1: Разная длительность для блоков

<section>
  <div data-aos="fade-up" data-aos-duration="500">Быстрая анимация</div>
  <div data-aos="fade-up" data-aos-duration="1500">Медленная анимация</div>
</section>

В этом примере первый блок появится быстро, а второй — медленно, создавая визуальный контраст и улучшая восприятие контента.

Пример 2: Интеграция с библиотекой через JavaScript

AOS.init({
  duration: 800, // глобальная длительность по умолчанию
  once: true
});
<div data-aos="zoom-in" data-aos-duration="1200">Индивидуальная анимация</div>

Глобальная настройка задаёт анимацию на 800 мс, но блок с data-aos-duration="1200" будет анимироваться дольше, на 1.2 секунды.

Рекомендации по использованию

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

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

  • Оптимизация производительности Длительные анимации на большом количестве элементов могут замедлять страницу. Обычно не рекомендуется устанавливать значения больше 2000–2500 мс для стандартных блоков.

  • Использование в адаптивных проектах В мобильной версии можно уменьшать длительность анимации, чтобы ускорить восприятие контента и не перегружать слабые устройства.

Совместимость с типами анимаций

Атрибут data-aos-duration корректно работает с любым типом анимации из библиотеки AOS:

  • fade — fade-up, fade-down, fade-left, fade-right
  • flip — flip-left, flip-right, flip-up, flip-down
  • zoom — zoom-in, zoom-out
  • slide — slide-up, slide-down, slide-left, slide-right

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

Динамическое изменение через JavaScript

Можно менять data-aos-duration программно после загрузки страницы или при определённых событиях:

const element = document.querySelector('.dynamic');
element.setAttribute('data-aos-duration', '2000');
AOS.refresh(); // Обновляет анимации после изменения атрибутов
  • AOS.refresh() необходим для того, чтобы библиотека заново пересчитала все элементы и применяла новые значения анимаций.

Вывод

Атрибут data-aos-duration обеспечивает точный контроль времени анимации на уровне каждого элемента, позволяя создавать профессионально выглядящие интерфейсы с плавными и согласованными анимационными эффектами. Использование его совместно с другими атрибутами, такими как data-aos-delay и глобальными настройками через AOS.init(), открывает широкие возможности для настройки скролл-анимаций в проектах любого уровня сложности.

Оглавление