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 | ДЕМО |
