Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются , выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны , но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

WOW.jsНеплохой плагин для реализации анимации элементов при скроллинге . Он имеет очень много анимированных вариантов появления блоков и довольно легко настраивается. ScrollMagicЕще один популярный плагин, с помощью которого можно реализовать сложную анимацию, которая будет срабатывать при прокрутке ролика мышки . В данном случае, плагин позволяет делать действительно сложные , эффекты движения, смены фона на страница и вообще деформации фигур. ScrollMagic часто используют на промо-сайтах, где требуется много анимировать.

ScrollmeПростой и легкий плагин с помощью которого можно реализовать эффектную анимацию при прокрутке . Вы можете масштабировать, вращать, двигать, уменьшать или увеличивать прозрачность любого элемента.

SuperscrolloramaSuperscrollorama - мощный, но тяжелый плагин для создания анимации при прокрутке . В его арсенале имеется множество различных настроек для анимации текста, отдельных DIV элементов, включая эффекты.
Более детальную информацию можно найти в документации к данному jQuery плагину.

onScreenОтличный плагин, который мы часто используем в своих проектах. От позволяет легко и быстро сделать различные эффекты появления элементов при прокрутке страницы . Плагин легкий и не грузит страницу.

OnePagejQuery плагин OnePage позволяет разбить страницу на отдельные экраны с высотой 100% и анимировать переход по ним. Требуется лишь легкий толчок, чтобы начался скроллинг к следующему экрану. Такой же эффект использовался на промо-сайте 5s.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.

FSVSОчень похожий по функционалу плагин на предыдущий. Позволяет сделать скользящую прокрутку по экранам с помощью css3. Имеет аналогичную проблему при просмотре на телефонах. Переход по экранам в виде отдельных слайдов возможен как с помощью ролика мышки, так и посредством клика на точечную боковую навигацию.

jInvertScrolljInvertScroll позволяет создавать классный горизонтальный parallax скролиинг . В то время, когда Вы крутите ролик мышки вниз, все элементы на странице движутся горизонтально, к тому же с разной скоростью, что создает parallax эффект.

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

ScrollocueОригинальный плагин для специфических задач. Позволяет передвигаться по странице выделяя блоки простым кликом правой клавишей мыши по странице. С каждым новым кликом выделяется элемент ниже, тем самым страница немного прокручивается. Также поддерживается скроллинг стрелками на клавиатуре.

Scrolling Progress BarИнтересное решение, с помощью которого можно показать прогресс прочтения информации на странице. Также есть возможность разбить текст на разделы и все это будет визуально выводиться в любом удобном для вас месте на странице.

multiScroll.jsmultiScroll.js - это jQuery плагин, похож на два предыдущих плагина скользких экранов , но имеет одно значительное отличие. Если в предыдущих случаях просто перелистывался экран, то этот больше похож на современный слайдер изображений . Экран разделяется на две равных части и левая перелистывается вверх, а правая вниз. Таким образом контент практически разрывается.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера . Думаю, посетители оценят ваш сайт.

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

jQuery.panelSnapПолноэкранный скользящий скроллинг-плагин . Плагин ничем особо не отличающийся, на первый взгляд, от предыдущих, но в нем реализована внутренняя область с прокруткой. Если мы докручиваем до конца внутреннего контента, то автоматически происходит переход на следующий экран. Теоретически - это решение проблемы для адаптивных сайтов . Если внутреннее окошко сделать в полный размер, на маленьких экранах контент, который не поместился по высоте, не будет теряться.

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

В этой статье мы рассмотрим анимации прокрутки страницы и эффекты на основе CSS и jQuery.

Перед тем, как приступить к реализации эффектов, давайте пробежимся по небольшому введению.

Используемый в этом примере код можно улучшить, применив кеширование объектов, и использовав CSS анимации вместо метода animate() библиотеки jQuery, но для упрощения объявления объектов повторяются, а также все описывается на основе jQuery, чтобы сконцентрировать внимание на концепции.

Что такое эффекты и анимация прокрутки?

Анимации прокрутки - это новая, распространяющаяся техника, позволяющая фронтенд-разработчику создавать богатые и интерактивные окружения. Они запускаются, когда пользователь прокручивает страницу.

Для того, чтобы определить, прокручивает ли пользователь страницу, мы используем jQuery событие scroll() .

Зная, что пользователь прокручивает страницу, мы можем определить позицию полосы прокрутки по вертикали с помощью jQuery метода scrollTop() , и применить желаемый эффект:

$(window).scroll(function() { if ($(this).scrollTop() > 0) { // apply effects and animations } });

Являются ли они адаптивными?

Если нам нужно реализовать адаптивные эффекты прокрутки, необходимо определить следующие свойства:

Свойство окна браузера width ;

Свойство окна браузера height .

Без этих свойств наши эффекты прокрутки будут “статичными”, и не будут правильно работать при изменении пользователем размера окна по вертикали или по горизонтали.

Эти значения легко можно получить с помощью jQuery методов width() и height() .

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

$(window).scroll(function() { if ($(this).width() < 992) { if ($(this).height() 1000) { // apply effects } } } });

Теперь, когда мы определились с основами эффектов прокрутки, давайте посмотрим на них в действии на основе четырех примеров.

Для упрощения мы фокусируемся только на проверке того, как эффекты будут меняться в зависимости от различных значений свойств окна width и height .

Пример №1

Этот эффект запускается, когда верхняя позиция полосы прокрутки превышает 60px. В этом случае выполняемый фрагмент кода выглядит следующим образом:

If ($(window).scrollTop() > 60) { $(".banner h2").css("display", "none"); $(".banner .info").css("display", "block"); } else { $(".banner h2").css("display", "block"); $(".banner .info").css("display", "none"); }

Вышеприведенный код прячет элемент h2 из элемента с классом.banner , и отображает дочерний элемент.info , который изначально скрыт.

Этот код также можно было написать следующим образом:

If ($(window).scrollTop() > 60) { $(".banner h2").hide(); $(".banner .info").show(); } else { $(".banner h2").show(); $(".banner .info").hide(); }

Пример №2

Следующий пример зависит не только от позиции полосы прокрутки, но также и от ширины окна. В частности, есть следующие условия:

• Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 600px.
• Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 480px.
• Ширина окна больше 991px. В этом случае анимация запускается только когда положение полосы прокрутки превышает 450px.

If ($(window).width() 600) { // запускаемая анимация firstAnimation(); } } else if ($(window).width() > 549 && $(window).width() 480){ // запускаемая анимация firstAnimation(); } } else { if ($(window).scrollTop() > 450) { // запускаемая анимация firstAnimation(); } }

Код запускаемой анимации выглядит следующим образом:

Var firstAnimation = function () { $(".clients .clients-info").each(function () { $(this).delay(500).animate({ opacity: 1, height: "180", width: "250" }, 2000); }); };

Вышеприведенный код анимирует свойства opacity , height и width элементов.clients-info .

Пример №3

Третий эффект зависит не только от позиции полосы прокрутки, но также и от ширины окна. В частности, есть следующие условия:

• Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 1750px;
• Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 1150px;
• Ширина окна больше 991px. В этом случае анимация запускается только когда положение полосы прокрутки превышает 850px.

Код для вышеприведенных случаев представлен ниже:

If ($(window).width() 1750){ secondAnimation(); } } else if ($(window).width() > 549 && $(window).width() 1150) { secondAnimation(); } } else { if ($(window).scrollTop() > 850) { secondAnimation(); } }

Код выполняемой анимации выглядит следующим образом:

Var secondAnimation = function() { $(".method:eq(0)").delay(1000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); $(".method:eq(1)").delay(2000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); $(".method:eq(2)").delay(3000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); $(".method:eq(3)").delay(4000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); };

Вышеприведенный код последовательно изменяет свойство opacity элементов.method , а затем меняет свойство background-color дочерних элементов h4 .

Пример №4

Этот эффект зависит не только от позиции полосы прокрутки, но также и от ширины окна. В частности, есть следующие условия:

• Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 3500px;
• Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 2200px;
• Ширина окна больше 991px. В этом случае анимация запускается только когда положение полосы прокрутки превышает 1600px.

Результаты в следующем коде:

If ($(window).width() 3500) { thirdAnimation(); } } else if ($(window).width() > 549 && $(window).width() 2200) { thirdAnimation(); } } else { if ($(window).scrollTop() > 1600) { thirdAnimation(); } }

Код анимации следующий:

Var thirdAnimation = function() { $(".blogs").find("p").delay(1400).animate({ opacity: 1, left: 0 }, "slow"); $(".blogs").find("img").delay(2000).animate({ opacity: 1, right: 0 }, "slow"); $(".blogs").find("button").delay(2500).animate({ opacity: 1, bottom: 0 }, "slow"); };

Вышеприведенный код последовательно анимирует свойства opacity , left , right и bottom элементов p , img , button .

Заключение

Надеюсь, представленные здесь примеры хорошо демонстрируют, как можно использовать jQuery для реализации анимации и эффектов прокрутки.

Я уверен, что Вам встречались такие сайты, на которых при прокрутке страницы вниз дополнительный контент, а именно блоки, подгружались с красивыми и плавными эффектами. Оказывается подобное очень просто делается с помощью простого скрипта и нескольких правил CSS. В демо будет несколько эффектов загрузки, которые Вы можете выбрать для своего сайта.

А теперь давайте посмотрим как выглядит сама структура подгружаемых блоков в HTML:

Как видите, что код очень простой.

CSS

Таким образом у нас получилась страница, на которой расположено несколько блоков, которые должны при прокрутке вниз плавно подгружаться. Теперь нам нужно придумать 2 класса CSS, которые будут работать если один из блоков окажется в видимом поле браузера:

Hidden{ opacity:0; } .visible{ opacity:1; }

jQuery

Теперь нам нужно добавить скрипт , который запустить весь этот не сложный двигатель. Вот именно в этом коде мы будем использовать тот класс который отвечает за один из многих типов анимации в Animate.css, например это будет fadeIn, соответственно код будет иметь такой вид:

JQuery(document).ready(function() { jQuery(".post").addClass("hidden").viewportChecker({ classToAdd: "visible animated fadeIn", offset: 100 }); });

Работает данный скрипт следующим образом: если наш блок находится в невидимом поле браузера ему присваивается класс hidden, который скрывает наш блок, после того как наш блок только доходит видимой части окна ему тут же присваивается класс visible вместе с классом от Animate.css, который добавляет красивую анимацию при появлении. Вот и весь секрет:)

Надеюсь Вам понравился данный урок. Пока:)

Интернет меняется каждый день. Одни технологии и методы возникают, другие исчезают. По этой причине веб-дизайнеры и front-end разработчики должны быть в курсе последних тенденций в веб-дизайне. Parallax-прокрутка, фиксированные заголовки, плоский дизайн, одностраничные сайты и CSS-анимация некоторые из самых горячих веб-тенденций на текущий момент.

В этом уроке мы рассмотрим создание анимации и эффектов при прокрутке страницы с помощью CSS и jQuery.

Четыре эффекта, которые мы будем создавать можно увидеть на этой странице .

Примечание: Код, используемый в этом уроке можно было бы улучшить при помощи кэширования объектов и использования CSS анимации вместо метода jQuery "animate() ", но для простоты мы сконцентрируемся в первую очередь на идее.

Что такое анимация и эффекты при прокрутке страницы?

Подобная анимация и эффекты новый, набирающий популярность метод, который дает front-end разработчикам возможность создавать мультимедийные и интерактивные веб-проекты. Когда пользователь прокручивает страницу вниз, разработчики могут легко манипулировать объектами с помощью CSS и jQuery.

Для того чтобы обнаружить прокручивает ли пользователь страницу вниз, мы используем jQuery-событие scroll() .

После того, как мы узнаем, что пользователь прокручивает страницу, мы можем получить вертикальное положение полосы прокрутки с помощью метода scrollTop() и применить нужные эффекты:

if ($(this ) .scrollTop () > 0 ) {
// создаем эффекты и анимацию
}
} ) ;

Являются ли они адаптивными?

Если мы заинтересованы в создании адаптивных эффектов (оптимизированных под разные разрешения экрана), то мы должны определить следующие свойства:

• Свойство width - ширина окна браузера.
• Свойство height - высота окна браузера.

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

Мы можем легко получить значения этих свойств с помощью методов width() и height() .

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

$(window) .scroll (function () {
if ($(this ) .width () < 992 ) {
if ($(this ) .height () 1000 ) {
// создаем эффекты
}
}
}
} ) ;

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

Пример #1

Этот эффект срабатывает, когда верхнее положение полосы прокрутки окна превышает 60px. В таком случае выполняется следующий фрагмент кода:

if ($(window) .scrollTop () > 60 ) {
$(".banner h2" ) .css ("display" , "none" ) ;
$(".banner .info" ) .css ("display" , "block" ) ;
} else {
$(".banner h2" ) .css ("display" , "block" ) ;
$(".banner .info" ) .css ("display" , "none" ) ;
}

Код выше скрывает дочерний элемент h2 внутри элемента с классом .banner и показывает его дочерний элемент .info , который был первоначально скрыт.

Этот код также может быть записан следующим образом:

if ($(window) .scrollTop () > 60 ) {
$(".banner h2" ) .hide () ;
$(".banner .info" ) .show () ;
} else {
$(".banner h2" ) .show () ;
$(".banner .info" ) .hide () ;
}

Пример #2

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

Ширина окна имеет значение меньше или равно 549px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 600px.

Ширина окна имеет значение между 550px и 991px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 480 пикселей.

Ширина браузера имеет значение больше 991px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 450px.

Вышеупомянутые предположения реализованы в следующем фрагменте кода:

if ($(window) .width () 600 ) {

firstAnimation() ;
}
} else if ($(window) .width () > 480 ) {
// анимация, которая должны быть выполнена
firstAnimation() ;
}
} else {
if ($(window) .scrollTop () > 450 ) {
// анимация, которая должны быть выполнена
firstAnimation() ;
}
}

Код, который содержит анимацию, которая будет выполнена, следующий:

var firstAnimation = function () {
$(".clients .clients-info" ) .each (
function () {
$(this ) .delay (500 ) .animate ({
opacity: 1 ,
height: "180" ,
width: "250"
} , 2000 ) ;
}
) ;
} ;

Код выше анимирует свойства непрозрачности, высоту и ширину для элемента .clients-info .

Пример #3

Третий эффект зависит также от верхней позиции полосы прокрутки окна и от ширины окна. В частности, мы делаем следующие предположения:

Ширина окна имеет значение меньше или равно 549px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 1750px.

Ширина окна имеет значение между 550px и 991px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 1150px.

Ширина окна имеет значение больше 991px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 850px.

И вот код:

if ($(window) .width () 1750 ) {
secondAnimation() ;
}
} else if ($(window) .width () > 549 & amp;& amp; $(window) .width () 1150 ) {
secondAnimation() ;
}
} else {
if ($(window) .scrollTop () > 850 ) {
secondAnimation() ;
}
}

Код, который содержит анимацию, следующий:

var secondAnimation = function () {
$(".method:eq(0)" ) .delay (1000 ) .animate ({
opacity: 1
} , "slow" ,
function () {

}
) ;

$(".method:eq(1)" ) .delay (2000 ) .animate ({
opacity: 1
} , "slow" ,
function () {
$(this ) .find ("h4" ) .css ("background-color" , "#b5c3d5" ) ;
}
) ;

$(".method:eq(2)" ) .delay (3000 ) .animate ({
opacity: 1
} , "slow" ,
function () {
$(this ) .find ("h4" ) .css ("background-color" , "#b5c3d5" ) ;
}
) ;

$(".method:eq(3)" ) .delay (4000 ) .animate ({
opacity: 1
} , "slow" ,
function () {
$(this ) .find ("h4" ) .css ("background-color" , "#b5c3d5" ) ;
}
) ;
} ;

Код выше последовательно анимирует свойство opacity для элементов .method , а затем меняет цвет фона дочерних элементов h4 .

Пример #4

Этот эффект также зависит от верхней позиции полосы прокрутки и ширины окна. Более конкретно:

Если ширина окна имеет значение меньше или равное 549px, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 3500px.

Если ширина окна имеет значение между 550px и 991px, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 2200px.

Если ширина окна имеет значение большее, чем 991px, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 1600px.

Это реализовано следующим кодом:

if ($(window) .width () 3500 ) {
thirdAnimation() ;
}
} else if ($(window) .width () > 549 & amp;& amp; $(window) .width () 2200 ) {
thirdAnimation() ;
}
} else {
if ($(window) .scrollTop () > 1600 ) {
thirdAnimation() ;
}
}

Код для анимации следующий:

.delay (2000 ) .animate ({
opacity: 1 ,
right: 0
} , "slow"
) ;

$(".blogs" ) .find ("button" ) .delay (2500 ) .animate ({
opacity: 1 ,
bottom: 0
} , "slow"
) ;
} ;

Код выше последовательно анимирует свойства opacity, left, right и bottom для элементов в P, IMG, BUTTON .

Заключение

Я надеюсь, что показаные здесь четыре примера помогут вам понять как можно создавать различные эффекты и анимацию при прокрутке страницы.

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

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

Как же сделать так чтобы анимация запускалась при прокрутке страницы? Об сегодня мы этом и поговорим в нашей статье. Но для начала рекомендуем вам прочитать этот материал . В нем вы узнаете про файл animate.css который позволит вам анимировать ваши элементы и который является неотъемлемой частью нашего сегодняшнего материала.

Итак, для запуска анимации при прокрутки нам понадобиться небольшая JavaScript библиотека под названием WOW.js . Она имеет небольшой набор функций, параметров и дополнительных настроек. Одним из ее плюсов есть то что для ее использования не нужно подключать библиотеку JQuery. В результате что мы получаем, amimate.css файл с набором анимаций и wow.js файл который берет эту анимацию и запускает ее при прокрутке.

Давайте перейдем к подключению этой библиотеки на свой сайт.

Подключение wow.js

Первым делом у вас должна быть подключена сама анимация animate.css.

Соответственно вторым пунктом будет подключение WOW.js. Для того чтобы ее активировать нужно, прописать еще дополнительно несколько строк.

new WOW().init();

Две составляющие подключены. Теперь перейдем к примеру, использование давайте создадим блок и пропишем классы wow этот класс обозначает что анимация будет запускаться при прокрутке, если элемент не находиться вверху страницы. И второй класс это сама анимация, возьмем например bounceInUp . Таким образом у нас должно получиться вот такой код.

Ваш контент

Как мы уже говорили, библиотека имеет несколько параметров для более подробной настройке анимации.

Дополнительные параметры

data-wow-duration: Изменить длительность анимации;

data-wow-delay: Задержка перед началом анимации;

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

data-wow-iteration: Сколько раз анимация повторяется?

Ваш контент

Ваш контент

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

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

boxClass: класс для wow-объектов;

animateClass: класс для срабатывания CSS анимации ("animated" для animate.css);

offset: аналогично data-wow-offset, только в глобальном масштабе;

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

live: постоянная проверка новых WOW элементов на странице.

wow = new WOW(
{
boxClass: "wow", // default
animateClass: "animated", // default
offset: 0, // default
mobile: true, // default
live: true // default
}
wow.init();

На этом все, инструкция как использовать библиотеку WOW.js для анимирование элементов при прокрутке закончена. Пишите свои отзывы и комментируйте материал. Делитесь с друзьями.