wow js animate.css анимация при прокрутке страницы все эффекты
Многие пользователи интернета сталкивались с красивыми эффектами при прокрутке страниц, как различные заголовки текста, картинки, кнопки делают различную анимацию. В основном такое встречается на Landing Page (продающие страницы, целевая страница) — вот там они действительно нужны — это очень красиво для посетителя, но и тут нужно знать меру и не перестараться с динамикой. А так на блогах и других сайтах считаю, что такие эффекты не нужны, чем проще тем лучше, как многие говорят, что пользователю интернет ресурсов нужно достичь своей цели в три клика и это на самом деле так.
Скрипт animate.css дает очень большие возможности для веб мастера — верстальщика сделать красиво идеальный Landing Page с шикарной анимацией. Данную библиотеку можно скачать на официальном сайте wowjs. Ниже представлены классы и результаты эффектов анимации.
Чтобы работала наша анимация необходимо следующее:
1. Скачиваем wow.min.js
2. Скачиваем animate.css
3. Подключаем animate.css в шапке между тегами ‹head›‹/head›
1 |
<link rel="stylesheet" type="text/css" href="css/animate.css" /> |
4. Подключаем wow.min.js в конце страницы перед закрывающим тегом ‹/body›
1 |
<script src="js/wow.min.js"></script> |
5. Активируем wow.min.js перед закрывающим тегом ‹/body› вставляем данный код
1 2 3 |
<script> new WOW().init(); </script> |
И последнее, что нам нужно сделать подставить нужный class wow которые предоставлены ниже в таблице.
Пример: нам необходимо заголовку H2 применить какой то эффект
1 |
<h2 class="wow rubberBand">Здесь название вашего заголовка</h2> |
мы применили к заголовку понравившийся нам class wow, вот и все, также мы можем применить к тегам ‹p›‹/p› картинкам, кнопкам, таблицам и т.д. фантазия у каждого своя, используйте классы которые предоставлены ниже и будет вам счастье.
№ | class Анимации | Результат |
---|---|---|
1 | wow bounce | ДЕМО |
2 | wow flash | ДЕМО |
3 | wow pulse | ДЕМО |
4 | wow rubberBand | ДЕМО |
5 | wow swing | ДЕМО |
6 | wow tada | ДЕМО |
7 | wow wobble | ДЕМО |
8 | wow jello | ДЕМО |
9 | wow bounceIn | ДЕМО |
10 | wow bounceInDown | ДЕМО |
11 | wow bounceInLeft | ДЕМО |
12 | wow bounceInRight | ДЕМО |
13 | wow bounceInUp | ДЕМО |
14 | wow bounceOut | ДЕМО |
15 | wow bounceOutDown | ДЕМО |
16 | wow bounceOutLeft | ДЕМО |
17 | wow bounceOutRight | ДЕМО |
18 | wow bounceOutUp | ДЕМО |
19 | wow fadeIn | ДЕМО |
20 | wow fadeInDown | ДЕМО |
21 | wow fadeInDownBig | ДЕМО |
22 | wow fadeInLeft | ДЕМО |
23 | wow fadeInLeftBig | ДЕМО |
24 | wow fadeInRight | ДЕМО |
25 | wow fadeInRightBig | ДЕМО |
26 | wow fadeInUp | ДЕМО |
27 | wow fadeInUpBig | ДЕМО |
28 | wow fadeOut | ДЕМО |
29 | wow fadeOutDown | ДЕМО |
30 | wow fadeOutDownBig | ДЕМО |
31 | wow fadeOutLeft | ДЕМО |
32 | wow fadeOutLeftBig | ДЕМО |
33 | wow fadeOutRight | ДЕМО |
34 | wow fadeOutRightBig | ДЕМО |
35 | wow fadeOutUp | ДЕМО |
36 | wow fadeOutUpBig | ДЕМО |
37 | wow flip | ДЕМО |
38 | wow flipInX | ДЕМО |
39 | wow flipInY | ДЕМО |
40 | wow flipOutX | ДЕМО |
41 | wow flipOutY | ДЕМО |
42 | wow lightSpeedIn | ДЕМО |
43 | wow lightSpeedOut | ДЕМО |
44 | wow rotateIn | ДЕМО |
45 | wow rotateInDownLeft | ДЕМО |
46 | wow rotateInDownRight | ДЕМО |
47 | wow rotateInUpLeft | ДЕМО |
48 | wow rotateInUpRight | ДЕМО |
49 | wow rotateOut | ДЕМО |
50 | wow rotateOutDownLeft | ДЕМО |
51 | wow rotateOutDownRight | ДЕМО |
52 | wow rotateOutUpLeft | ДЕМО |
53 | wow rotateOutUpRight | ДЕМО |
54 | wow slideInUp | ДЕМО |
55 | wow slideInDown | ДЕМО |
56 | wow slideInLeft | ДЕМО |
57 | wow slideInRight | ДЕМО |
58 | wow slideOutUp | ДЕМО |
59 | wow slideOutDown | ДЕМО |
60 | wow slideOutLeft | ДЕМО |
61 | wow slideOutRight | ДЕМО |
62 | wow zoomIn | ДЕМО |
63 | wow zoomInDown | ДЕМО |
64 | wow zoomInLeft | ДЕМО |
65 | wow zoomInRight | ДЕМО |
66 | wow zoomInUp | ДЕМО |
67 | wow zoomOut | ДЕМО |
68 | wow zoomOutDown | ДЕМО |
69 | wow zoomOutLeft | ДЕМО |
70 | wow zoomOutRight | ДЕМО |
71 | wow zoomOutUp | ДЕМО |
72 | wow hinge | ДЕМО |
73 | wow jackInTheBox | ДЕМО |
74 | wow rollIn | ДЕМО |
75 | wow rollOut | ДЕМО |
76 | wow shake | ДЕМО |