Анимация при прокрутке страницы с библиотекой AOS js

Пост опубликован 12 марта 2023 в 12:49 и находится в рубриках HTML&CSS. 249

Фронтенд разработчики часто сталкиваются с тем, что клиенты просят реализовать на сайте какие-то потрясающие эффекты — анимацию при прокрутке страницы. Да, конечно, можно такие эффекты создать на CSS самостоятельно, потратив несколько часов на попытки сделать достойную анимацию. Но для этих целей уже создано множество готовых библиотек. И одна из лучших — это Animate On Scroll или AOS js

Быстрая навигация

# Установка AOS.js
# Анимация элементов при скролле с AOS
# Кастомизация анимации при прокрутке страницы
# Больше возможностей

В этой статье вы узнаете о том, как установить эту библиотеку и заставить ее работать. К концу урока создание анимации при скролле станет для вас плёвым делом.

1Установка AOS.js

На выбор есть несколько вариантов установки. Можно скачать, использовать CDN или установить библиотеку через YARN, NPM либо BOWER

Подключаем с помощью CDN

CDN (Content Delivery Networks) подразумевает, что что вам не нужно скачивать библиотеку, она хранится на удаленных серверах. Все что нужно сделать — это подключить ее CSS и JS файлы к себе на станицу.


<span class="code__title">HTML</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/aos@2.3.1/dist/aos.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>&gt;</span>
...
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/aos@2.3.1/dist/aos.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

Установка с помощью YARN, NPM, BOWER


<span class="code__title">YARN</span>
yarn add aos

<span class="code__title">NPM</span>
npm install aos --save

<span class="code__title">BOWER</span>
bower install aos --save

Вот и все, больше ничего делать не нужно. Производительность нашего сайта особо не пострадала.

Чтобы инициализировать AOS достаточно написать в HTML или лучше в отдельном JavaScript файле следующую строчку:


<span class="code__title">HTML</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span>
  AOS.init();
<span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

2Анимация элементов при скролле с AOS

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

Для базовой анимации впишите в ваш HTML элемент атрибут data-aos=»название_анимации»

Разработчики Animate On Scroll создали много типов анимации, которые вы можете выбрать для своего блока. К примеру, при появлении/исчезновении элемента можно добавить анимации: «fade», «fade-up» или «fade-down-left». Или же добавить анимацию флипа и слайда «flip-up», «flip-left», «slide-down» и «slide-right».

data-aos=»fade-right»

data-aos=»fade-down»

data-aos=»fade-left»

Посмотрите пример разметки:


<span class="code__title">HTML</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"aos aos--first"</span> <span class="hljs-attr">data-aos</span>=<span class="hljs-string">"fade-right"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>data-aos="fade-right"<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"aos aos--second"</span> <span class="hljs-attr">data-aos</span>=<span class="hljs-string">"fade-down"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>data-aos="fade-down"<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"aos aos--third"</span> <span class="hljs-attr">data-aos</span>=<span class="hljs-string">"fade-left"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>data-aos="fade-left"<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

Уже выходит неплохо, а ведь кроме строки инициализации нам не пришлось написать ни строчки js кода. Рассмотрим все базовые возможности AOS.js:

Fade эффекты

data-aos=»fade-down»


HTML
<div data-aos="fade-down">
    ...
</div>

data-aos=»fade-up»


HTML
<div data-aos="fade-up">
    ...
</div>

data-aos=»fade-right»


HTML
<div data-aos="fade-right">
    ...
</div>

data-aos=»fade-left»


HTML
<div data-aos="fade-left">
    ...
</div>

Также существую варианты:

data-aos=»fade-up-right»
data-aos=»fade-up-left»
data-aos=»fade-down-right»
data-aos=»fade-down-left»

Flip эффекты

Вы можете обновлять страницу кнопкой f5, чтобы лучше рассмотреть анимацию.

data-aos=»flip-left»


HTML
<div data-aos="flip-left">
    ...
</div>

data-aos=»flip-right»


HTML
<div data-aos="flip-right">
    ...
</div>

data-aos=»flip-up»


HTML
<div data-aos="flip-up">
    ...
</div>

data-aos=»flip-down»


HTML
<div data-aos="flip-down">
    ...
</div>

Zoom эффекты

data-aos=»zoom-in»


HTML
<div data-aos="zoom-in">
    ...
</div>

data-aos=»zoom-in»


HTML
<div data-aos="zoom-in">
    ...
</div>

Еще zoom анимации:

data-aos=»zoom-in-up»
data-aos=»zoom-in-down»
data-aos=»zoom-in-left»
data-aos=»zoom-in-right»
data-aos=»zoom-out-up»
data-aos=»zoom-out-down»
data-aos=»zoom-out-right»
data-aos=»zoom-out-left»

3Кастомизация анимации при прокрутке страницы

Если вам не достаточно стандартных возможностей, можно кастомизировать анимацию добавив еще дата-атрибутов к вашему HTML элементу. Рассмотрим их подробнее.

data-aos-offset — этот атрибут используется для того, чтобы начать анимацию при прокрутки страницы раньше или позже. Значение по умолчанию 120px.
data-aos-duration — как видно из названия, атрибут отвечает за продолжительность анимации. Его значение может быть от 50 до 3000 с шагом в 50 мс. По умолчанию имеет значение 400.
data-aos-easing — атрибут аналогичный animation-timing-function в CSS. Может принимать значения linear, ease-in-out, ease-out-quart и другие. Полный список вы можете найти в документации.
data-aos-once — важная настройка, позволяет контролировать должна ли анимация воспроизводиться только при первом обращении к определенному элементу или при каждой прокрутке вверх/вниз. По дефолту анимация воспроизводится всякий раз при скролле, чтобы отменить это, укажите значение true.
data-aos-anchor — запускает анимацию в зависимости от положения какого-нибудь другого элемента. В качестве значения принимает любой селектор. Значение по умолчанию null, то есть анимация будет запускаться относительно собственной позиции элемента.
data-aos-anchor-placement — по дефолту анимация начинается как только верхняя часть элемента достигает нижней части экрана. Такое поведение можно изменить с помощью этого атрибута. Возможные значения top-bottom, top-center или top-top. Такие же комбинации можно сделать и с center или bottom.

Вот несколько примеров подобной кастомизации:

data-aos=»fade-right»


HTML
<div data-aos="fade-right"
     data-aos-offset="300"
     data-aos-easing="ease-in-sine">...</div>

data-aos=»fade-up»


HTML
<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-center">
</div>

data-aos=»flip-left»


HTML
<div data-aos="flip-left"
     data-aos-easing="ease-out-cubic"
     data-aos-duration="2000">...</div>

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

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


<span class="code__title">JS</span>
AOS.init({
  <span class="hljs-attr">offset</span>: <span class="hljs-number">200</span>,
  <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>,
  <span class="hljs-attr">easing</span>: <span class="hljs-string">'ease-in-quad'</span>,
  <span class="hljs-attr">delay</span>: <span class="hljs-number">100</span>,
});

Также можно отключить анимацию на определенных устройствах:


<span class="code__title">JS</span>
AOS.init({
  <span class="hljs-attr">disable</span>: <span class="hljs-string">'mobile'</span>
});

AOS.init({
  <span class="hljs-attr">disable</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">var</span> maxWidth = <span class="hljs-number">768</span>;
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>.innerWidth &lt; maxWidth;
  }
});

В этой статье вы познакомились с библиотекой Animate on Scroll. Как видите AOS является отличным выбором для того, чтобы добавить анимацию при скролле на ваш сайт, ведь она очень просто устанавливается и прекрасно кастомизируется.

Анимация при прокрутке страницы с библиотекой AOS js

Быстрая навигация

1Установка AOS.js

Подключаем с помощью CDN

Установка с помощью YARN, NPM, BOWER

2Анимация элементов при скролле с AOS

Fade эффекты

Flip эффекты

Zoom эффекты

3Кастомизация анимации при прокрутке страницы

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

Новые посты:

Новый более удобный синтаксис медиа запросов css @media

Что лучше Pinia или Vuex ?

Как скрыть кусок кода от пользователя

Категории:

Топ посты: