От автора: статья написана нашим сегодняшним гостем Michał Sajnóg, front-end разработчиком с сайта Netguru. Michał создал библиотеку анимации во время прокрутки страницы. Больше всего в этой библиотеке мне нравится то, что она максимально перекладывает создание анимации и контроль над ней на CSS. Что говорить, эту библиотеку использует множество крупных торговых площадок. Michał покажет, как надо работать с данной библиотекой.
Вы когда-нибудь видели такие длинные веб-страницы, при прокрутке которых запускаются различные типы анимации? Я хочу поделиться с вами моим плагином, который серьезно облегчает работу с любой анимацией, а также по максимуму отдает работу с анимацией CSS. Можете заглянуть на GitHub.
Проблемы других библиотек
В моей предыдущей компании для анимирования элементов во время скрола мы использовали WOW.js (или что-то наподобие). С простыми проектами проблем не возникало, но вот для крупных хотелось большего контроля над происходящим. Во всех популярных библиотеках анимация обрабатывалась через JS путем вставки инлайнового CSS кода. Ужас, инлайновые стили! Их крайне сложно контролировать, а переписать еще сложнее. В некоторых случаях можно задавать стили через JS, но все же лучше хранить стили там, где им место, в отдельном файле.
Я решил создать библиотеку, которая выполняла бы одну задачу – определяла позицию элемента и присваивала соответствующие классы, когда те появляются в поле зрения.
Полный контроль анимации в CSS
Я решил разбить задачи:
Вся логика ушла в JavaScript
Вся анимация в CSS
Так вы сможете самостоятельно добавлять свою анимацию, а также менять ее в зависимости от размера видимой области экрана.
Принцип работы AOS
Идея AOS крайне проста: необходимо следить за всеми элементами и их положением по переданным настройкам. Затем добавляется или удаляется класс aos-animate. Конечно, на практике не всегда все вот так просто, но основной принцип такой. Анимация полностью обрабатывается на стороне CSS.
Примеры анимации в CSS
В библиотеке есть множество готовых вариантов анимации, однако создание новой анимации также не составит труда. Пример:
|
1 2 3 4 5 6 7 8 |
[aos="fade"] { opacity: 0; transition-property: opacity; } [aos="fade"].aos-animate { opacity: 1; } |
Думать о длительности или задержке анимации совсем не нужно. Необходимо всего лишь в CSS:
Добавить стили для атрибута aos с именем вашей анимации
Задать свойство transition (по умолчанию стоит all, чем короче будет анимация для выбранных свойств, тем выше производительность)
Добавить свойства для состояния после плавного перехода .aos-animate
Длительность, задержка, функция анимации, все это задается отдельно.
Пример HTML
|
1 |
<div class="some-item" aos="fade">Example Element</div> |
Пример с большой длительностью:
|
1 |
<div class="some-item" aos="fade" aos-duration="500">Example Element</div> |
**Совет:** Можно использовать data-aos вместо aos для прохождения валидации HTML.
Демо
Разные анимации:
С якорями:
С якорями и разными функциями анимации:
Простая пользовательская анимация:
Дополнительные возможности
Якоря – анимируйте элемент на основе позиции другого элемента
Якорное размещение – анимируйте элемент на основе его положения на экране. Анимировать элементы можно не как только они показываются на экране, но, к примеру, когда нижняя граница элемента проходит середину экрана.
Анимация в обе стороны – По умолчанию анимация работает как при скроле вниз, так и вверх. Однако можно специально прописать, чтобы анимация срабатывала только в одном направлении.
Простое отключение – Отключайте анимацию на мобильных устройствах при помощи готовых опций mobile, phone, tablet или с помощью пользовательских условий/функций.
Асинхронность – Перерасчет позицией элементов в DOM при его изменении. После загрузки через AJAX вам ни о чем не нужно будет беспокоиться.
Без зависимостей – Библиотека написана на чистом JS и полностью независима.
Редакция: Michał Sajnóg
Источник: //css-tricks.com/
Редакция: Команда webformyself.
