CSS анимация при скролле (скроллинге, прокручивании) страницы

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

Такой прием часто используется в лендинг страницах, так как лучше css анимацию при скролле создавать для длинных (высоких) страниц.

Что понадобится и как это будет работать.

Для начала нам нужна готовая страница (как банально, да?). Дальше нам понадобится очень чудный инструмент Animate.css. Посмотреть, как он работает и скачать его можно тут. После того, как наиграетесь с анимациями, которые нам предоставляет Animate.css, скачивайте его и подключайте к своей странице в head:

Уже сейчас можно пробовать создавать css-анимации различных элементов вашей страницы. Это можно сделать, добавив к элементу пару классов:

Класс animate говорит нашему инструменту Animate.css, что именно этот элемент будет анимированым. Второй класс fadeInLeft говорит, какая именно анимация будет применена. Все типы css анимаций вы уже видели, когда игрались с выпадающим списком на сайте Animate.css. Думаю, аналогию провести не составит труда.

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

Продолжим. Нам теперь нужно, чтобы анимации элементов вашего landing page (или другой обычной страницы) появлялись при скролле. Тут нам поможет инструмент wow.js. Посмотреть, что это такое и скачать его можно тут. Скачиваем и подключаем скрипт после jquery:

Далее нам нужно инициализировать его:

А теперь последний штрих: меняем в анимированных элементах класс animate на класс wow:

Перезагружаем страницу. Наслаждаемся =)))))

Вот пример того, что получилось у меня.

Успехов в творчестве!

CSS анимация при скролле (скроллинге, прокручивании) страницы: 6 комментариев

  1. Денис

    У вас ошибка в коде класса

    Написано: «animate» а нужно «animated» иначе нечего не работает

Добавить комментарий для Денис Отменить ответ

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