Вы здесь: Главная » CSS » CSS анимация » Анимация на html-странице с помощью animate css и wow.js

Анимация на html-странице с помощью animate css и wow.js

Анимация типа @keyframes + свойство animation позволяют сделать анимированный логотип или баннер, красивый слайдер или выпадающее меню. Для того чтобы облегчить процесс создания самой анимации, вы можете использовать библиотеку animate.css, автором которой является Daniel Eden. Всю информацию о ней  на английском языке вы найдете на сайте animate.style. Там же можно протестировать все виды анимации. На момент написания статьи существует animate.css версии 4.1.1, и она несколько отличается от предыдущей версии наименованием классов и использованием в коде css-переменных.

Подключение animate.css

Для того чтобы подключить animate.css, необходимо указать в блоке <head> вашего html-документа ссылку на эту библиотеку на CDN:

Второй способ - скачать css-файл с Github-репозитория (несжатый файл animate.css или минифицированный файл animate.min.css), разместить ее в папке css вашего проекта и подключить аналогичным способом:

Animate.css можно загрузить с помощью npm или yarn и импортировать в ваш проект:

Классы для добавления анимации

С помощью animate.css вы можете добавить ряд анимаций-заготовок, которые реализованы в этой css-библиотеке в виде классов. Для удобства пользования все классы разбиты на группы с названиями, например, Bouncing entrances и Bouncing exits. Если вы внимательно присмотритесь к названиям классов плюс нажмете на них и посмотрите на анимацию, то наверняка заметите, что классы, имеющие In в названии (bounceIn, например), показывают появление объекта с анимацией, а те, которые имеют  Out ( bounceOut) в названии, нужны для исчезающих объектов.

animate.css официальный сайт

Для того чтобы применить анимацию из набора Animate.css,  вам нужно к тем блокам в html-разметке, которые анимируются, добавить класс animate__animated, который отвечает за проигрывание анимации в течение 1 секунды, а также любой из классов, которые отвечают за вид анимации, например, animate__fadeInRight или animate__zoomInDown.

Копируем класс для анимацииПримечание: вы можете скопировать название анимационного класса, нажав на иконку справа от него на сайте animate.style.

После загрузки страницы вы увидите сразу все ваши блоки, появляющиеся с выбранной анимацией. Запустите пример ниже для просмотра результата, нажав на кнопку "Run Pen".

Учтите, что изображения загружаются с внешнего ресурса unsplash.com, поэтому скорость их загрузки может быть больше времени воспроизведения анимации, и вы ничего не увидите. Перезапустите пример или откройте его на codepen.io, нажав на кнопку edit-with-codepen.

See the Pen by Elen (@ambassador)
on CodePen.0

Повторный запуск анимации произойдет после нажатия на кнопку "Rerun" в нижнем правом углу, т.к. анимация запускается одновременно для всех блоков после загрузки страницы (примера).

Классы animate.css для задержки анимации

В том случае, если вам нужно, чтобы блоки запускались с задержкой, необходимо использовать любой из 5 классов для задержки от 1 до 5 секунд:

Пример с задержкой анимации:

See the Pen animate.css with delay by Elen (@ambassador)on CodePen.0

Если вам нужны другие значения задержек с одинаковым шагом, достаточно изменить значение css-переменной --animate-delay.

Классы animate.css для изменения скорости анимации

По умолчанию анимация в animate.css воспроизводится в течение 1 секунды. За это отвечает обязательный для использования в animate.css класс .animate__animated.

Для того чтобы увеличить или уменьшить скорость анимации, можно использовать такие классы:

Попробуем использовать разные значения анимаций для нового примера.

See the Pen animate.css fast/normal/slow by Elen (@ambassador) on CodePen.0

Обратите внимание, что некоторые анимации имеют продолжительность менее 1 секунды. Вы можете изменить значение продолжительности анимации с помощью свойства --animation-duration глобально, задав ее для :root, или локально для любого элемента.

Классы animate.css для повторения анимации

По умолчанию любая из представленных в animate.css анимаций проигрывается один раз. Для того чтобы изменить это, можно использовать такие классы:

В примере использован класс animate__infinite для <h1> и animate__repeat-3 для мяча. Для обоих элементов добавлено свойство  animation-direction: alternate для того, чтобы анимация на четных повторениях проигрывалась от конца в начало.

See the Pen by Elen (@ambassador) on CodePen.0

Учтите, что во многих классах Animate.css используется анимация со сдвигом относительно основной позиции элемента вправо или влево, поэтому на вашей странице в момент начала воспроизведения такой анимации будет появляться горизонтальная полоса прокрутки. Убрать ее можно, назначив свойство overflow: hidden для родительского элемента.

Анимация при скролле с помощью Animate.css и плагина wow.js

В том случае, если вам нужно, чтобы анимация запускалась только после того, как пользователь доберется до нужного места html-страницы с помощью скроллинга (полосы прокрутки), одной animate.css будет недостаточно. Проще всего воспользоваться для этого плагином WOW.js, который был написан еще в 2015 году, но работает до сих пор.

Подключение wow.js

Для того чтобы у вас срабатывала анимация при скролле, необходимо подключить не только Animate.css, но и файл плагина. Поскольку плагин написан на JavaSript, то после всей разметки перед закрывающим тегом </body> нужно разместить тег <script> с ссылкой на CDN:

Можно также скачать плагин wow.js с репозитория на Github и подключить из локальной папки js:

После этого тега размещаем ниже еще один тег <script> с вызовом основной функции плагина:

Добавление в разметку класса wow

Это еще не все . Для того чтобы код плагина сработал, нужно к анимированным блоками добавить еще один класса - wow.

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

Смотрим на пример:

See the Pen animate.css wow.js by Elen (@ambassador) on CodePen.0

Настройки плагина wow.js

У плагина wow.js есть свои настройки, которые можно задать в коде при вызове основной функции:

Также настройки можно задать с помощью data-атрибутов:

  • data-wow-duration="2s" – позволяет указать время проигрывания анимации. Значение указывается в секундах (s) или миллисекундах (ms). Заменяет классы с продолжительностью воспроизведения анимации типа animate__slow в animate.css;
  • data-wow-delay = "1.5s" – задает задержку перед проигрыванием анимации в секундах (s) или миллисекундах (ms). Заменяет собой классы задержек типа animate__delay-2s в animate.css, но при этом вы устанавливаете свое значение;
  • data-wow-offset="200" – количество пикселей от  низа экрана до края элемента, когда включается анимация для него;
  • data-wow-iteration="2" – количество повторов анимации. Заменяет классы для повторения анимации в animate.css.

Пример:

Все эти атрибуты не являются обязательными и указываются по мере необходимости. Если их нет, анимация будет проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *