Обсудить проектПоявление блоков в зависимости от скролла при помощи 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-offset | Запуск анимации раньше или позже назначенного времени (px) | 200 | 120 |
data-aos-duration | Продолжительности анимации (ms) | 600 | 400 |
data-aos-easing | Управления функцией | ease-in-sine | ease |
data-aos-delay | Задержка (ms) | 300 | 0 |
data-aos-anchor | Якорный элемент, смещение которого будет засчитываться для запуска анимации вместо фактических смещений элементов | #selector | null |
data-aos-anchor-placement | Размещение якоря — какая позиция элемента на экране должна вызывать анимацию | top-center | top-bottom |
data-aos-once | Следует ли активировать анимацию один раз или каждый раз, когда вы прокручиваете вверх / вниз до элемента | true | false |
Все возможные параметры:
| Fade | Flip | Slide | Zoom | Размещение якоря | Easing |
| fade fade-up fade-down fade-left fade-right fade-up-right fade-up-left fade-down-right fade-down-left | flip-up flip-down flip-left flip-right | slide-up slide-down slide-left slide-right | zoom-in zoom-in-up zoom-in-down zoom-in-left zoom-in-right zoom-out zoom-out-up zoom-out-down zoom-out-left zoom-out-right | top-bottom top-center top-top center-bottom center-center center-top bottom-bottom bottom-center bottom-top | linear ease ease-in ease-out ease-in-out ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine ease-in-out-sine ease-in-quad ease-out-quad ease-in-out-quad ease-in-cubic ease-out-cubic ease-in-out-cubic ease-in-quart ease-out-quart ease-in-out-quart |
Обратите внимание, что двойной `[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 () для пересчета всех смещений.
закрыть