Анимация при прокрутке страницы

Анимируем элементы при прокрутке страницы

'1'

Пример на Codepen

Подписаться на Telegram-канал блога

Как это работает

При прокрутке страницы, когда элемент появляется в видимой области окна браузера (за это отвечает wow.js), элементу добавляется анимация из библиотеки Animate.css

Технически при загрузке страницы указанному элементу назначаются inline-стили style="visibility: hidden; animation-name: none;", то есть элемент скрыт и не имеет имени анимации, а после того, как элемент появляется в видимой области окна браузера, элементу добавляется специальный класс animate__animated, который запускает анимацию и inline-стили меняются на style="visibility: visible; animation-name: fadeInUp;", где fadeInUp - имя анимации из animate.min.css


Что нужно для анимации при прокрутке

  1. Animate.css - css-библиотека с анимациями
  2. wow.js - плагин для запуска анимации


Скачиваем и подключаем Animate.css

Чтобы скачать css-файл с анимациями, переходим на Github https://github.com/animate-css/animate.css

Ищем файл animate.min.css и нажимаем на него

'1'

Ищем кнопку Raw - нажимаем

'2'

Сохраняем исходный файл animate.min.css в папку с css-файлами

'3'

Подключаем файл animate.min.css внутри тега <head> до основного css-файла

'4'


Расставляем необходимые классы из Animate.css

Предположим, хотим задать анимацию, для блока <div class="scroll__image">

<div class="scroll__image">
  <img src="https://picsum.photos/1920/1080" alt=""/>
</div>

Смотрим на сайте https://animate.style/ какая анимация нам подходит и нажимаем на иконку копирования рядом с именем анимации

Предположим выбрали эффект анимации bounceIn - копируем класс этого эффекта animate__bounceIn и добавляем этот класс блоку, который хотим анимировать

<div class="scroll__image animate__bounceIn">
  <img src="https://picsum.photos/1920/1080" alt=""/>
</div>

Пока что мы добавили блоку только класс эффекта, поэтому пока сама анимация работать не будет. За саму анимацию отвечает класс animate__animated, он будет добавлятся автоматически при прокрутке страницы с помощью wow.js


Скачиваем и подключаем wow.js

Переходим также на Github - https://github.com/graingert/WOW/tree/master/dist

Ищем файл wow.min.js и нажимаем на него

'5'

Ищем кнопку Raw - нажимаем

'6'

Сохраняем исходный файл wow.min.js в папку с js-файлами

'7'

Подключаем файл wow.min.js перед закрывающим тегом </body> до основного js-файла

'8'


Инициализация wow.js

Теперь, чтобы анимация срабатывала при прокрутке страницы, блоку, который мы хотим анимировать, добавляем класс wow

<div class="scroll__image wow animate__bounceIn">
  <img src="https://picsum.photos/1920/1080" alt=""/>
</div>

Далее в файле main.js инициализируем wow.js

const wow = new WOW({
  boxClass: 'wow', /* класс, который необходим для работы wow.js */
  animateClass: 'animate__animated', /* класс, который будет автоматически добавляться анимируемым элементам при прокрутке страницы */
  offset: 30, /* по-умолчанию установлено значение 0, то есть как только при прокрутке страницы, элемент достигает низа окна браузера проигрываться анимация, в данном случае анимация начнется на 30px выше от низа окна браузера */
  mobile: true, /* если true, то на мобильных тоже будет анимация, если false, то на мобильных анимация отключается */
  live: true /* если true, то анимация будет работать даже на динамически добавляемых элементах, если false, то только на тех элементах, которые были на странице при ее загрузке */
})
wow.init(); /* Инициализация плагина с установленными выше свойствами */


Еще раз, кратко, порядок действий

  1. Скачиваем animate.min.css и подключаем в <head> до основного css-файла
  2. Скачиваем wow.min.js и подключаем перед закрывающим тегом </body> до основного js-файла
  3. Блокам, которые будем анимировать добавляем класс wow и класс с эффектом, например animate__bounceIn
  4. В основном js-файле устанавливаем свойства и инициализируем плагин wow.js


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

Для более тонкой настройки анимации каждого отдельного блока есть дополнительные data-атрибуты

data-wow-duration - продолжительность анимации (использую, если нужно сделать продолжительность анимации быстрее или медленней)

data-wow-delay - задержка перед началом анимации (использую, если несколько блоков в ряд и необходимо чтобы они появлялись не все сразу, а по очереди друг за другом)

data-wow-offset - расстояние в пикселях от низа окна браузера, на котором начнется анимация элемента(обычно не использую)

data-wow-iteration - количество повторений анимации (обычно не использую)

Можно использовать несколько data-атрибутов одновременно

Использовать очень просто, например, необходимо чтобы элементы расположеные в ряд появлялись не все сразу, а по очереди друг за другом - добавляем первому блоку data-wow-delay="0s", второму data-wow-delay=".2s", третьему data-wow-delay=".4s"

<div class="scroll__cards">
  <div class="scroll__card scroll-card wow animate__fadeInLeft" data-wow-delay="0s">
    <div class="scroll-card__title">Lorem ipsum dolor.</div>
    <div class="scroll-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est cumque enim ex laborum voluptatibus, nulla expedita facilis impedit ab possimus doloribus atque obcaecati voluptatem rem, maxime non suscipit. Aspernatur, similique.</div>
  </div>
  <div class="scroll__card scroll-card wow animate__fadeInLeft" data-wow-delay=".2s">
    <div class="scroll-card__title">Lorem ipsum dolor.</div>
    <div class="scroll-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est cumque enim ex laborum voluptatibus, nulla expedita facilis impedit ab possimus doloribus atque obcaecati voluptatem rem, maxime non suscipit. Aspernatur, similique.</div>
  </div>
  <div class="scroll__card scroll-card wow animate__fadeInLeft" data-wow-delay=".4s">
    <div class="scroll-card__title">Lorem ipsum dolor.</div>
    <div class="scroll-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est cumque enim ex laborum voluptatibus, nulla expedita facilis impedit ab possimus doloribus atque obcaecati voluptatem rem, maxime non suscipit. Aspernatur, similique.</div>
  </div>
</div>

Когда страница прокрутится до этих элементов, то у первого блока анимация начнется сразу, у второго через 0.2 секунды, у третьего через 0.4 секунды

'1'


Изображения - https://picsum.photos/

Поддержать

Похожие записи

Категории: CSS HTML
Теги: CSS HTML
Выбор диапазона значений на основе плагина noUiSlider

Выбор диапазона значений на основе плагина noUiSlider

В статье рассмотрим один из вариантов, как сделать выбор диапазона значений, который обычно используется в фильтрах интернет-магазинов

31/10/2021
Создаём графики на основе плагина Chart.js (обновлено 17.08.2021)

Создаём графики на основе плагина Chart.js (обновлено 17.08.2021)

В данной статье рассмотрим вариант создания графиков на основе плагина Charts.js

11/08/2021
Постепенное изменение числа до целевого значения

Постепенное изменение числа до целевого значения

В этой статье разберём частый кейс при вёрстке - постепенное/плавное увеличение числа от некоторого значения до целевого

14/07/2021