Анимация элементов при прокрутке — WOW.js

Ранее уже была заметка для добавления анимационных эффектов при прокрутке страницы c jQuery плагином ScrollMe.

Скрипт WOW.js использует библиотеку animate.css, благодаря чему имеет больше возможностей, и не требует никакие библиотеки на JavaScript

Установка:

Добавляем на сайт стили animate.css и скрипт WOW.js:

И подключаем скрипт:

Добавление эффектов к элементам:

Класс wow сделает элемент невидимым пока до него не дойдет прокрутка, а класс bounceInUp добавит эффект появления. Посмотреть все эффекты можно на странице библиотеки animate.css

Примеры:

Дополнительные настройки:

data-wow-duration: Продолжительность анимации

data-wow-delay: Задержка перед запуском анимации

data-wow-offset: Расстояние от нижнего края браузера для запуска анимации

data-wow-iteration: Количество повторов анимации

Пример:

Настройка параметров:

boxClass: Имя класса, которое показывает скрытое поле при прокрутке.

animateClass: Имя класса, который запускает CSS анимацию

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

mobile: Включает и выключает WOW.js на мобильных устройствах.

live: Действие с асинхронно загруженным содержимым.

По умолчанию:

WOW.js на сайте wowjs.uk

Смотрите также:

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

Ваш комментарий отправлен!