Интересный блог Виталия Пискарева

wow js animate.css анимация при прокрутке страницы все эффекты

Многие пользователи интернета сталкивались с красивыми эффектами при прокрутке страниц, как различные заголовки текста, картинки, кнопки делают различную анимацию. В основном такое встречается на Landing Page (продающие страницы, целевая страница) — вот там они действительно нужны — это очень красиво для посетителя, но и тут нужно знать меру и не перестараться с динамикой. А так на блогах и других сайтах считаю, что такие эффекты не нужны, чем проще тем лучше, как многие говорят, что пользователю интернет ресурсов нужно достичь своей цели в три клика и это на самом деле так.

Скрипт animate.css дает очень большие возможности для веб мастера — верстальщика сделать красиво идеальный Landing Page с шикарной анимацией. Данную библиотеку можно скачать на официальном сайте wowjs. Ниже представлены классы и результаты эффектов анимации.

Чтобы работала наша анимация необходимо следующее:

1. Скачиваем wow.min.js
2. Скачиваем animate.css
3. Подключаем animate.css в шапке между тегами ‹head›‹/head›

4. Подключаем wow.min.js в конце страницы перед закрывающим тегом ‹/body›

5. Активируем wow.min.js перед закрывающим тегом ‹/body› вставляем данный код

И последнее, что нам нужно сделать подставить нужный class wow которые предоставлены ниже в таблице.

Пример: нам необходимо заголовку 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 ДЕМО

 

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 5 из 5)