Выезжающие панели, падающие блоки, выплывающие изображения, выкатывающиеся, подёргивающиеся, крутящиеся, появляющиеся из неоткуда, качающиеся, "дышащие", меняющие размер элементы страниц. Хотите это всё или частично у себя на сайте? Пожалуйста, мы с радостью поделимся рецептами.
Для начала нужно подключить необходимые файлы: WOW.js и animate.css. Скачать свежие версии всегда можно на GitHub, но если не хотите их искать, то скачайте у нас:
Итак, скачали. Складываем их в нужные папки и подключаем. Обратите внимание на пути. В нашем случае файл animate.css находится в папке /css, а файл wow.min.js — в папке /js.
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>Первую строку помещаем в раздел <head>, остальное вниз страницы, но до тега </body>.
Далее всё очень просто: добавляем два класса для любого элемента
<section class="wow slideInLeft">Содержимое блока</section>, где:
класс wow — подключение элемента к скрипту;
класс fadeInLeft — определенный стиль для анимации элемента.
Часто используют: fadeInRight (Left/Up/Down) и bounceInRight (Left/Up/Down) — это классы для выезжающих элементов.
Все стили можно посмотреть здесь: Animate.css
Можно добавить дополнительный функционал:
data-wow-duration: изменяет продолжительность анимации;
data-wow-delay: задержка перед началом анимации;
data-wow-offset: расстояние до запуска анимации (относительно нижней части окна браузера);
data-wow-iteration: повторяет анимацию «столько-то раз».
В первых двух свойствах обязательно указываем секунды (s). Можно как в целых, так и десятых:
Можно использовать в классах для любого тега.
СВами.
