Наверх

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

Опубликовано:
1915
1 2 3 4 5
(100%) / 1

Существует много различных библиотек, которые помогают нам, разработчикам реализовывать потрясающие эффекты анимации на странице прокрутки. Сегодня мы поковыряемся в настройках 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
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 () для пересчета всех смещений.

 

Вывод

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

Дорогой web-мастер.
Для меня очень важна обратная связь от Вас в виде лайков или рейтинга.
Пожалуйста оцените эту публикацию или поставь лайк за старание.
Статья подготовлена для Вас сайтом kisameev.ru
Перевел: Кисамеев Дмитрий
Статью просмотрели: 1915
Понравилось:
Поделится ссылкой
Комментариев...
Оставьте его первым.

Для вставки кода используйте комментарии от ВК или FB:

Нашли баг или ошибку?

Выдели текст
мышкой и нажми:
Нашел ошибку