Использование CSS-переменных

Библиотека AOS (Animate on Scroll) предоставляет удобный способ анимации элементов при прокрутке страницы. Один из продвинутых подходов к управлению анимациями — использование CSS-переменных для настройки параметров AOS, таких как длительность анимации, задержка, смещение и функция плавности.

После подключения AOS через <link> для стилей и <script> для библиотеки, необходимо инициализировать её с помощью:

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

Эти значения можно вынести в CSS-переменные для гибкой настройки на уровне стилей. Например:

:root {
  --aos-duration: 1200ms;
  --aos-delay: 200ms;
  --aos-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

Использование CSS-переменных в HTML

Для применения переменных к конкретным элементам используются стандартные атрибуты data-aos-*. Пример:

<div 
  data-aos="fade-up" 
  data-aos-duration="var(--aos-duration)" 
  data-aos-delay="var(--aos-delay)" 
  data-aos-easing="var(--aos-easing)">
  Анимированный блок
</div>

Здесь var(--aos-duration) динамически подставляет значение из CSS, что позволяет централизованно управлять всеми анимациями без необходимости менять параметры в каждом HTML-элементе.

Гибкая настройка через каскадирование стилей

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

.section-featured {
  --aos-duration: 1500ms;
  --aos-delay: 400ms;
}

.section-testimonials {
  --aos-duration: 800ms;
  --aos-delay: 100ms;
}

HTML-разметка:

<section class="section-featured">
  <div data-aos="fade-right" data-aos-duration="var(--aos-duration)">
    Контент с индивидуальной длительностью
  </div>
</section>

<section class="section-testimonials">
  <div data-aos="fade-left" data-aos-duration="var(--aos-duration)">
    Контент с другой длительностью
  </div>
</section>

Такой подход обеспечивает централизованное управление параметрами анимаций и упрощает поддержку проекта, особенно при масштабировании страницы.

Анимация с динамическими переменными

CSS-переменные могут быть динамически изменяемыми через JavaScript. Это позволяет управлять анимациями в зависимости от состояния страницы или пользовательских действий:

document.documentElement.style.setProperty('--aos-duration', '2000ms');
document.documentElement.style.setProperty('--aos-delay', '500ms');

AOS.refresh(); // обновление всех анимаций после изменения переменных

Метод AOS.refresh() необходим для того, чтобы библиотека пересчитала все позиции элементов после динамических изменений.

Совмещение с медиа-запросами

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

@media (max-width: 768px) {
  :root {
    --aos-duration: 800ms;
    --aos-delay: 100ms;
  }
}

HTML-элементы автоматически будут использовать новые значения без дополнительных изменений в разметке.

Продвинутые функции и комбинации

  1. Комбинация нескольких переменных для одного элемента:
<div 
  data-aos="zoom-in" 
  data-aos-duration="var(--aos-duration)" 
  data-aos-delay="calc(var(--aos-delay) + 100ms)">
  Комбинированная анимация
</div>
  1. Использование переменных с разными функциями easing:
:root {
  --aos-easing-fast: cubic-bezier(0.2, 0, 0, 1);
  --aos-easing-slow: cubic-bezier(0.4, 0, 0.2, 1);
}
<div data-aos="fade-up" data-aos-easing="var(--aos-easing-fast)">
  Быстрая анимация
</div>

<div data-aos="fade-down" data-aos-easing="var(--aos-easing-slow)">
  Медленная анимация
</div>
  1. Использование переменных для групповых анимаций:
.section-cards {
  --aos-delay-step: 100ms;
}
const cards = document.querySelectorAll('.section-cards .card');
cards.forEach((card, index) => {
  card.setAttribute('data-aos-delay', `calc(var(--aos-delay-step) * ${index})`);
});

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

Использование CSS-переменных в связке с AOS обеспечивает максимальную гибкость управления анимациями, улучшает поддержку кода и позволяет легко внедрять адаптивные, динамические и групповые анимации без избыточного дублирования атрибутов в HTML.

Оглавление