Приветствую на страницах WebDevTips. Анимация при скролле — один из самых популярных элементов wow-дизайна Сегодня покажу самый простой способ создания анимации при прокрутке страницы. Без использования jQuery. Помогать нам в этом будут 2 маленькие библиотеки. Wow.js — для отслеживания положения экрана пользователя. Это поможет нам тригерить анимацию только при её достижении. И Animate.css, в которой с коробки есть большое количество готовых анимаций.

Для начала скачиваем эти 2 библиотеки тыц и тыц. После чего, подключаем их к нашему html документу. Так же Wow.js необходимо инициализировать (код ниже)

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

<script src="js/wow.min.js"></script>
<script>
  new WOW().init();
</script>

На этом настройка внешних библиотек закончена. Теперь переходим на сайт библиотеки animate.css. Справа мы можем выбрать анимации из списка, и там же увидеть, как они будут выглядеть. После того, как вы определились с анимацией, скопируйте её имя. Теперь перейдем непосредственно к добавлению анимации при скролле к нашим элементам. Добавлять анимации мы можем к любым html тегам. (Например img, div, p, span и т.д.).

Для того, что бы добавить анимацию для сайта, необходимо добавить всего несколько классов к тегу. К примеру, я хочу использовать анимацию fadeInUp для картинки. Для этого, я должен добавить к картинке класс wow (добавляется всегда, класс ‘animate__animated’ и название анимации, с припиской ‘animate__’, у меня это animate__fadeInUp. Сам код будет выглядеть вот так:

<img src="image1.jpg" class="wow animate_animated animate_fadeInUp">

Так же код не сильно отличается и для других элементов. К примеру, добавим ещё несколько видов анимации для других тегов:

<div class="wow animate_animated animate_bounceOut"></div>
<p class="wow animate_animated animate_fadeOut"></p>
<span class="wow animate_animated animate_flipInX"></span>

Дополнительные возможности

Как видите, все достаточно просто, с анимациями можно экспериментировать как вам угодно. Я же хочу рассказать вам о еще нескольких фишках wow.js. Библиотека предоставляет нам еще несколько любопытных атрибутов:

data-wow-duration: Менят время анимации
data-wow-delay: Задержка перед стартом анимации
data-wow-offset: Расстояние до старта анимации
data-wow-iteration: Количество повторений анимации

К примеру, мы хотим, что бы анимация нашей картинки длилась 2 секунды. Для этого в код выше необходимо добавить всего 1 атрибут:

<img src="image1.jpg" 
class="wow animate_animated animate_fadeInUp" 
data-wow-duration="2s">

Аналогично работает со всеми другими элементами и анимациями. Теперь на нашем сайте работают анимации при прокрутке, и привлекают больше внимания и, возможно, клиентов)

Спасибо, что прочитали. Если у вас остались вопросы, задавайте их в комментариях ниже, отвечу на все. Так же, советую ознакомиться с другими моими статьями:

1. Плавная прокрутка по клику на ссылку Jquery
2. Параллакс эффект для фона сайта на чистом CSS

Анимация при скролле в несколько строк кода

Дополнительные возможности