Анимация элементов при скроллинге — Animate.css

Плавно всплывающие элементы при скроллинге страницы (прокрутке) очень популярны на одностраничных сайтах, где нужно эффектно представить продукт для посетителей. В качестве элементов может выступать текст или любой другой блок: изображение, список и т.д. И выглядит это действительно круто!

Для этого используем библиотеки Animate.css — анимация элементов, waypoints — упрощение отслеживание скролинга и jQuery (для корректной работы с waypoints  используйте версию < 3!).

 

Подключаем jQuery (версия < 3), css файл для библиотеки Animate.css — https://daneden.github.io/animate.css/ и js файл для waypoints — http://imakewebthings.com/waypoints/. И после подключаем чистый js файл с любым именем (в примере это common.js).

 

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

 

CSS

 

Виды анимаций Animate.css

Библиотека Animate.css предоставляет большой выбор видов анимаций: увеличение, перемещение, вращение и другие. Просмотреть их можно здесь: https://daneden.github.io/animate.css/

 

Animate.css выбор анимации

 

Всплывающий блок после загрузки страницы

Проще всего реализовать всплывающий блок сразу же после загрузки страницы. Для этого следует добавить в файл common.js:

 

Где rotateInUpLeft — название анимации с сайта https://daneden.github.io/animate.css/

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

 

Всплывающий блок при скроллинге

Для использования анимации в момент скролла создадим функцию anim(name, type), где name — блок, а type — тип анимации, и будем вызывать ее с разными параметрами.

Чем меньше значение offset, тем ниже нужно будет проскролить для анимации блока.

 

Результат:

Всплывающие блоки при скроле

Возможно, вам будет интересно: