Как передовой разработчик, популярный запрос, который вы можете получить от своих клиентов, заключается в реализации потрясающих эффектов анимации при прокрутке страницы. Есть много библиотек, чтобы облегчить нам эту задачу. AOS , также называемая Animate on Scroll , является одной из таких библиотек, и она делает именно то, что предполагает ее название: она позволяет применять различные виды анимации к элементам при их прокрутке в представлении.
Здесь вы узнаете о внутренней работе AOS, о том, как установить библиотеку и заставить ее работать. К концу этого урока создание анимации для прокрутки для ваших клиентов станет очень простым делом.
Как установить библиотеку AOS
Вы можете установить AOS используя Bower или npm .
Беседка:
bower install aos --save NPM:
npm install aos --save
Далее, свяжите стили и скрипты AOS:
<link rel="stylesheet" href="bower_components/aos/dist/aos.css"> <script src="bower_components/aos/dist/aos.js"></script>
При желании вы можете загрузить таблицу стилей AOS и файлы JavaScript с помощью CDN следующим образом:
CSS:
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
JavaScript:
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
Вот и все, других зависимостей нет, что помогает контролировать производительность вашего сайта.
Чтобы инициализировать AOS, просто напишите строку ниже в своем файле JavaScript.
AOS.init();
Начало работы с AOS
После инициализации библиотеки все, что вам нужно сделать, это добавить некоторые конкретные атрибуты.
Чтобы использовать базовую анимацию, вам просто нужно добавить data-aos="animation_name" к вашим HTML-элементам.
Есть несколько типов анимации, которые вы можете выбрать. Например, вы можете добавить анимацию затухания, такую как «затухание», «затухание-вверх» и «затухание-вниз-влево». Точно так же вы можете также добавить анимацию пролистывания и скольжения, такую как «пролистывание», «пролистывание влево», «скольжение вниз» и «скольжение вправо».
Вот разметка нашего первого примера:
<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— вы можете использовать этот атрибут для управления функцией синхронизации для анимации различных элементов. Возможные значения:linear,ease-in-outиease-out-quart. Вы можете увидеть список всех принятых значений в файле Readme проекта на GitHub .
Вот пример использования data-aos-duration и data-aos-easing :
Дополнительные атрибуты данных, которые вы можете использовать:
-
data-aos-anchor— Этот атрибут полезен, когда вы хотите запустить анимацию, основываясь на положении какого-либо другого элемента. Он принимает любой селектор в качестве значения. Значением по умолчанию являетсяnull. Это означает, что все анимации будут запускаться относительно собственной позиции элемента. -
data-aos-anchor-placement— по умолчанию анимации для элемента применяются, как только его верхняя часть достигает нижней части окна. Это поведение можно изменить с помощью атрибутаdata-aos-anchor-placement. В качестве значения этот атрибут принимает два слова, разделенные дефисом. Например, вы можете установить егоtop-bottom,top-centerилиtop-top. Три такие комбинации также возможны как дляcenterи дляbottomзначений. -
data-aos-once— Вы также можете контролировать, должны ли анимации воспроизводиться, только когда вы попадаете на определенный элемент в первый раз или при каждой прокрутке вверх или вниз. По умолчанию анимация воспроизводится каждый раз, когда элементы прокручиваются в поле зрения. Вы можете установить значение этого атрибута вfalse, чтобы анимировать элементы только один раз.
Ниже приведен пример использования data-aos-anchor-placement :
Изучение внутренней работы библиотеки AOS
Цель Animate на Scroll — обрабатывать логику и анимацию отдельно. Для этого логика написана внутри JavaScript, а анимация написана внутри CSS. Такое разделение позволяет нам создавать собственные анимации и изменять их в соответствии с потребностями проекта в очень чистом и поддерживаемом рабочем процессе.
Библиотека отслеживает все элементы и их позиции. Таким образом, он может динамически добавлять или удалять класс aos-animate на основе предоставленных нами настроек. Например, класс aos-animate удаляется всякий раз, когда элементы, к которым он применяется, выходят из области просмотра. Однако, если элемент имеет значение data-aos-once установленное в значение true , класс aos-animate не будет удален из этого конкретного элемента, тем самым предотвращая возникновение какой-либо анимации при последующих событиях прокрутки, которые выводят элемент в поле зрения.
AOS также применяет значение атрибутов по умолчанию к элементу <body> в документе HTML. Например, для data-aos-easing будет установлено значение data-aos-easing , а для data-aos-duration — 400 .
Как я уже упоминал, библиотека применяет продолжительность анимации только в диапазоне от 50 до 3000 с шагом 50 мс. Это означает, что по умолчанию вы не можете иметь продолжительность анимации 225 мс. Однако вы можете добавить эту продолжительность самостоятельно, используя CSS следующим образом:
body[data-aos-duration='225'] [data-aos], [data-aos][data-aos][data-aos-duration='225']{ transition-duration: 225ms; }
Добавить свои собственные анимации в AOS также довольно просто.
Просто создайте селектор атрибута data-aos и установите для него имя вашей пользовательской анимации.
Затем добавьте свойство, которое вы хотите анимировать, с его начальным значением, а также установите для свойства transition имя свойства, которое вы хотите анимировать.
Например, допустим, ваша анимация называется 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, });
Вы также можете отключить анимацию на определенных устройствах или при определенных условиях, используя клавишу disable и установив ее значение для типа устройства, такого как mobile phone , phone или tablet . Кроме того, вы также можете отключить библиотеку с помощью функции.
Вот два примера, иллюстрирующие обе функции:
AOS.init({ disable: 'mobile' }); AOS.init({ disable: function () { var maxWidth = 800; return window.innerWidth < maxWidth; } });
В этом Pen, когда экран меньше 800px, анимации AOS отключены с помощью функции выше:
Помимо init() , AOS также предоставляет две дополнительные функции: refresh() и refreshHard() .
refresh() используется для пересчета смещений и позиций всех элементов. Он вызывается автоматически при таких событиях, как изменение размера окна.
refreshHard() вызывается автоматически всякий раз, когда новые элементы программно удаляются или добавляются в DOM. Таким образом, библиотека может обновлять массив элементов AOS. После обновления refreshHard() также запускает функцию refresh() для пересчета всех смещений.
Вывод
В этом руководстве вы познакомились с библиотекой Animate on Scroll, которую можно использовать для анимации элементов при прокрутке вверх или вниз по веб-странице.
Отсутствие зависимостей и возможность создавать собственные пользовательские анимации — это две функции, которые делают AOS отличным выбором библиотеки для прокрутки анимаций.
Если вас интересует анимация JavaScript, вам также может понравиться JS с Performance: requestAnimationFrame от Tim Evko.
Вы когда-нибудь пробовали AOS в проекте? Как прошел ваш опыт? Не стесняйтесь поделиться некоторыми советами с другими читателями.