Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

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

10 лет назад
36668 просмотров
CSS JavaScript Полезности

WOW.js - это самостоятельная JS библиотека для анимации элементов по мере прокрутки страницы. Самостоятельная - значит она не требует jQuery как 99% современных библиотек. WOW.js позволяет анимировать показ элементов при скролле, однако для создания параллакса при скролле лучше использовать другую библиотеку.

Преимущества библиотеки:

  • Независимость от других JS библиотек;
  • Маленький размер - 3Кб в минифицированном виде и 1.5 Кб в gzip;
  • Очень проста в установке и настройке. Вам вообще ничего не надо по сути настраивать;
  • Библиотека сама по себе очень "легкая" и не создает видимой нагрузки на браузер. Пользователи будут вам благодарны;

Недостатки:

  • Зависимость от animate.css, хотя вы можете от нее отказаться и написать свои анимации с блекджеком и кейфреймами;
  • Анимация не откатывается при обратной прокрутке;

Подключение и инициализация

Для начала подключим необходимые файлы стилей и сам скрипт:

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.min.js"></script>

Далее в вашем app.js (например) инициализируйте WOW.js:

new WOW().init(); // Не обязательно оборачивать вызов в $(document).ready(), т.к. у нас нет зависимости от jQuery

Далее к нужному элементу необходимо добавить класс wow и класс для CSS анимации, например так:

<div class="wow bounceInUp">Здесь уже ваш контент, картинки и прочее</div>

Дополнительная настройка HTML элементов

У каждого элемента можно указывать несколько специальных аттрибутов для более тонкой настройки анимации:

  • data-wow-duration: Изменение длительности анимации;
  • data-wow-delay: Задержка перед стартом анимации;
  • data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
  • data-wow-iteration: Сколько раз повторять анимацию?

Например так:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>

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

При инициализации объекта можно передать объект с параметрами:

  • boxClass: Класс для wow-объектов;
  • animateClass: Класс для срабатывания CSS анимации ('animated' для animate.css);
  • offset: То же самое, что и data-wow-offset, только в глобальном масштабе;

И, конечно, пример:

wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0
});
WOW.init();

Проект на GitHub: https://github.com/matthieua/WOW

Документация: http://mynameismatthieu.com/WOW/docs.html

Демо с собачками и котиками: http://mynameismatthieu.com/WOW/

Реальное использование: http://www.streamlineicons.com/

Что еще почитать
Создание CSS спрайтов с помощью Gulp
8 лет назад
13709 просмотров
Урок по созданию CSS спрайтов с помощью таск-менеджера Gulp. В отличие от других инструментов: средонезависимо, быстро, удобно, переносимо, настраиваемо.