Параметр once

В библиотеке AOS (Animate on Scroll) параметр once играет ключевую роль в управлении повторяемостью анимаций при прокрутке страницы. Он определяет, будет ли элемент анимироваться только один раз при первом появлении в зоне видимости или каждый раз при его повторном появлении на экране. Этот параметр особенно важен для оптимизации пользовательского интерфейса и создания эффектного, но ненавязчивого визуального поведения.

Назначение параметра once

  • true — элемент анимируется только один раз. После того как анимация была выполнена, повторное появление элемента в зоне видимости не вызывает анимацию.
  • false — элемент анимируется каждый раз, когда появляется в зоне видимости. Это значение используется по умолчанию.

Использование once: true актуально для длинных лендингов или страниц с большим количеством анимированных элементов, где повторяющиеся анимации могут отвлекать пользователя и замедлять рендеринг страницы.

Подключение и настройка

Инициализация AOS с параметром once выглядит следующим образом:

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

Здесь duration и easing используются вместе с once для детальной настройки визуального эффекта.

Локальная настройка для конкретного элемента

Помимо глобальной инициализации, параметр once можно задавать на уровне отдельного элемента с помощью атрибута data-aos-once. Это позволяет комбинировать элементы с разным поведением на одной странице:

<div data-aos="fade-up" data-aos-once="true">
  Контент с анимацией один раз
</div>

<div data-aos="fade-up" data-aos-once="false">
  Контент с анимацией при каждом появлении
</div>
  • data-aos-once="true" — анимация выполняется один раз при первом появлении.
  • data-aos-once="false" — анимация повторяется при каждом скролле к элементу.

Если атрибут data-aos-once не указан, элемент наследует глобальную настройку, переданную при AOS.init().

Практические рекомендации

  1. Оптимизация производительности Для страниц с большим количеством анимированных блоков рекомендуется устанавливать once: true. Это снижает нагрузку на браузер, особенно на мобильных устройствах.

  2. Контроль пользовательского внимания Эффект один раз помогает направить внимание на ключевые блоки контента без отвлечения повторяющимися анимациями.

  3. Комбинирование с другими параметрами once хорошо работает вместе с offset, delay и duration, позволяя создавать сложные цепочки анимаций с различной задержкой и длиной выполнения, где повторение не требуется.

Особенности поведения

  • При динамическом добавлении элементов через JavaScript необходимо вызывать AOS.refresh() после вставки новых блоков, чтобы библиотека корректно обработала параметр once.
  • Если элемент скрыт через CSS (display: none) и затем становится видимым, анимация с once: true сработает один раз при первом появлении, даже если элемент был скрыт на момент первой проверки.

Пример комплексной настройки

AOS.init({
  once: true,          // анимация один раз
  duration: 1000,      // 1 секунда анимации
  easing: 'ease-out',  // плавное затухание
  offset: 120          // анимация запускается на 120px до видимости элемента
});
<section data-aos="fade-left" data-aos-once="true">
  Блок с однократной анимацией при скролле
</section>

<section data-aos="zoom-in" data-aos-once="false">
  Блок с повторяющейся анимацией
</section>

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

Выводы по использованию once

Параметр once обеспечивает гибкий контроль над повторяемостью анимаций. Его правильное применение помогает:

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

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

Оглавление