Появление блоков в зависимости от скролла при помощи AOS библиотеки

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

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

Как установить библиотеку AOS

Подключаем стили и саму библиотеку: (исходники в конце урока)

<link href="css/aos.css" rel="stylesheet" />
<script src="js/aos.js"></script>

Если лень загружать файлы на сервер:

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

Начало работы с AOS

После инициализации библиотеки все, что вам нужно сделать, это добавить некоторые конкретные атрибуты.

Чтобы использовать базовые анимации, вам просто нужно добавить data-aos = "animation_name" в ваши HTML-элементы.

Есть несколько типов анимации, которые вы можете выбрать. Например, вы можете добавить анимацию затухания, такую как «fade», «fade-up», «fade-down-left». Аналогичным образом, вы также можете добавлять флип и слайд-анимации, такие как «flip-up», «flip-left», «slide-down» и «slide-right».

Вот разметка нашего первого примера:

<div class="box a" data-aos="fade-up">
<h2>Animated using fade-up.</h2>
</div>

<div class="box b" data-aos="flip-down">
<h2>Animated using flip-down.</h2>
</div>

<div class="box b" data-aos="zoom-in">
<h2>Animated using zoom-in.</h2>
</div>

Помимо строки инициализации в предыдущем разделе, анимация элементов не требует от вас ничего другого.
 

Настройка анимации с помощью атрибутов данных AOS

• data-aos-offset - . Его значение по умолчанию - 120 пикселей.
• data-aos-duration - этот атрибут можно использовать для указания продолжительности анимации. Значение длительности может составлять от 50 до 3000 с шагом 50 мс. Поскольку продолжительность обрабатывается в CSS, использование меньших шагов или более широкий диапазон излишне увеличивало бы размер кода CSS. Этот диапазон должен быть достаточным для почти всех анимаций. Значение по умолчанию для этого атрибута - 400.
• data-aos-easing - этот атрибут можно использовать для управления функцией синхронизации для анимации различных элементов. Возможные значения: линейный, легкодоступный и непринужденный.

Вы можете увидеть список всех принятых значений ниже:

Все возможные параметры:

Обратите внимание, что двойной `[data-aos] [data-aos]` - это не ошибка, это трюк, чтобы сделать индивидуальные настройки более важными, чем глобальные, без необходимости писать !important

data-aos-anchor-placement - вы можете установить для каждого элемента другую опцию размещения, принцип довольно прост, каждая опция размещения привязки содержит два слова, то есть `top-center`. Это означает, что анимация будет срабатывать, когда `top` элемента достигнет «центра» окна.
`Bottom-top` означает, что анимация будет запущена, когда` bottom` элемента достигнет `top` окна и так далее.

Изучение внутренних работ библиотеки AOS

Цель Animate on Scroll - обрабатывать логику и анимацию отдельно. Для этой цели логика написана внутри JavaScript, но анимация написана внутри CSS. Это разделение позволяет нам писать собственные анимации и модифицировать их на основе потребностей проекта в очень чистом и обслуживаемом рабочем процессе.

Библиотека отслеживает все элементы и их позиции. Таким образом, он может динамически добавлять или удалять класс .aos-animate на основе параметров, которые мы предоставили. Например, класс aos-animate удаляется всякий раз, когда элементы, к которым он применяется, выходят из окна просмотра. Однако, если элемент имеет значение data-aos-once, установленное в true, класс .aos-animate не будет удален из этого конкретного элемента, тем самым предотвращая любую анимацию при последующих событиях прокрутки, которые приводят элемент в действие.

AOS также применяет значение по умолчанию атрибутов к элементу

в документе HTML. Например, для упрощения данных будет установлено упрощение, а data-aos-duration - до 400.

Как я уже упоминал, библиотека применяет продолжительность анимации только в диапазоне от 50 до 3000 с шагом 50 мс. Это означает, что по умолчанию вы не можете иметь продолжительность анимации 225 мс. Однако вы можете добавить эту продолжительность самостоятельно с помощью CSS следующим образом:

Добавление вашей собственной анимации в AOS также довольно просто.

Просто создайте селектор атрибутов data-aos и настройте его на имя вашей пользовательской анимации.

Затем добавьте свойство, которое вы хотите оживить, с его начальным значением, а также свойство перехода, заданное именем свойства, которое вы хотите оживить.

Например, предположим, что ваша анимация называется rotate-c, и элемент, к которому он применяется, изначально поворачивается на -180 градусов.

Вот как выглядит CSS:

[data-aos="rotate-c"] {
  transform: rotate(-180deg);
  transition-property: transform;
}

Чтобы установить заключительный этап анимации (в нашем примере это будет элемент, вращающийся от -180 градусов до 0 градусов), вы добавляете следующее правило CSS чуть ниже предыдущего:

[data-aos="rotate-c"].aos-animate {
  transform: rotate(0deg);
}

Теперь добавьте data-aos = "rotate-c" в ваш выбранный элемент HTML, и это повернет по часовой стрелке (от -180 градусов до 0 градусов), когда пользователи прокрутят этот элемент в виде.

Больше возможностей

Библиотека AOS также предоставляет множество других функций, которые делают ее еще более гибкой и удобной для пользователя. Вместо того, чтобы предоставлять атрибуты для каждого элемента отдельно, вы можете передать их как объект функции init ().

Вот пример:

AOS.init({
  offset: 200,
  duration: 800,
  easing: "ease-in-quad",
  delay: 100,
});

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

Вот два примера для иллюстрации обеих функций:

AOS.init({
  disable: "mobile";
}); 

AOS.init({
  disable: function () {
    var maxWidth = 800;
    return window.innerWidth > maxWidth;
  }
});

Помимо init(), AOS также предоставляет две дополнительные функции: refresh () и refreshHard ().

Refresh() - используется для пересчета смещений и позиций всех элементов. Он вызывается автоматически при таких событиях, как изменение размера окна.

RefreshHard() - вызывается автоматически, когда новые элементы программно удаляются из DOM или добавляются в DOM. Таким образом, библиотека может поддерживать обновление элементов AOS. После обновления массива refreshHard() также запускает функцию refresh () для пересчета всех смещений.

Вывод

В этом уроке представлена библиотека Animate on Scroll, которую вы можете использовать для анимации элементов при прокрутке вверх или вниз по веб-странице.