Просмотр поста

# Milordas (31.05.2014 / 12:45)
айм нот спик инглиш)))

http://mynameismatthieu.com/WO ... .html
Настройка WOW.js
1 Подключение CSS библиотеки анимации.
Ссылка на Animate.css
(Вы можете применить другую библиотеку изменив настройки в WOW.js)

<link rel="stylesheet" href="css/animate.css">

2 Подключение и запуск WOW.js

<script src="js/wow.min.js"></script>
<script>
 new WOW().init();
</script>

Появление анимации
1 Делаем появляющийся элемент
Добавьте класс .wow к html элементу.Он будет невидимым, пока пользователь не прокрутит страницу чтобы раскрыть его.

<div class="wow">  Появляющийся текст/картинка  </div >

2Выберите тип анимации
Выберите тип анимации в Animate.css, затем добавьте соответствующий класс CSS к HTML элементу

<div class="wow bounceInUp">  Content to Reveal Here  </div >

ГОТОВО

Посмотрите эти примеры сайтов которые используют WOW.js + Animate.css :
Fliplingo
Nastyicons
Streamline Icons
Дополнительные найстроки

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: Имя класса к которому применяется анимация.
animateClass: Класс типа анимации (’animated’ стоит по дефолту от animate.css библиотеки)
offset: Задайте расстояние между нижней части браузера

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