Мнение подобно костям —
у каждого свои

Итак, наверняка вы видели множество сайтов с эффектами анимации - и это смотрится очень красиво! А сделать такую анимацию у себя на сайте очень легко. Следуйте инструкции и наслаждайтесь результатом. На мой взгляд, главное не переборщить с анимацией на сайте - нескольких элементов будет вполне достаточно.

Инструкция

1. Сначала вам нужно скачать этот архив с моего сайта. В нем находятся три файла: animate.css, wow.js и wow.min.js. Для работы анимации нам нужен только файл CSS. Но если вы хотите, чтобы анимация не запускалась пока пользователь не прокрутит страницу, тогда нужно задействовать эти два яваскрипта. В файле wow.js есть пара настроек, такие как: "расстояние до элемента при запуске анимации" и "включение отключение анимации на мобильных устройствах". Посмотрите, там всё просто!

2. Конечно же, нужно загрузить эти файлы на хостинг сайта. После чего, перед тегом </head> прописать пути к данным файлам. Например,

<link rel="stylesheet" href="/шаблон/eb/css/animate.css">
<script src="/шаблон/eb/js/wow.min.js"></script>
<script src="/шаблон/eb/js/wow.js"></script>

3. Теперь подключаем стили анимации в блоки. Блоки могут быть разные (p, div и другие). Более того, анимацию можно подключить к уже имеющимся стилям. Например,

<p class="wow animated fadeInUp">Epic Blog</p> - здесь мы подключили анимацию fadeInUp к тексту Epic Blog, wow animated означает, что анимация запустится только когда данный блок будет в видимой части экрана, это очень удобно, если ваш блок находится где-то внизу страницы.

<div class="logo wow animated fadeInUp"><a href="/index.html"><img src="/images/logo.png" /></a></div> - тут мы подключили анимацию к логотипу, у которого уже есть свой стиль.

Также можно выставлять задержку анимации. Например,

<p class="wow animated zoomIn">wow animated zoomIn</p>
<p class="wow animated zoomIn" data-wow-delay="0.3s">wow animated zoomIn</p>
<p class="wow animated zoomIn" data-wow-delay="0.6s">wow animated zoomIn</p>
<p class="wow animated zoomIn" data-wow-delay="0.9s">wow animated zoomIn</p>

Живой пример такой анимации можно посмотреть здесь.

Далее следуют примеры и вся возможная анимация в файле animate.css

Примеры

wow animated pulse

wow animated flash

wow animated rubberBand

wow animated shake

wow animated swing

wow animated tada

wow animated wobble

wow animated bounce

wow animated bounceInLeft

wow animated bounceInRight

wow animated bounceInUp

wow animated bounceInDown

wow animated bounceOut

wow animated bounceOutDown

wow animated bounceOutLeft

wow animated bounceOutRight

wow animated bounceOutUp

wow animated fadeInRight

wow animated fadeInLeft

wow animated fadeInDown

wow animated fadeInUp

wow animated fadeInDownBig

wow animated fadeInLeftBig

wow animated fadeInRightBig

wow animated fadeInUpBig

wow animated fadeOutDown

wow animated fadeOutUp

wow animated fadeOutDownBig

wow animated fadeOutLeftBig

wow animated fadeOutRightBig

wow animated fadeOutUpBig

wow animated flipInX

wow animated flipInY

wow animated flipOutX

wow animated flipOutY

wow animated lightSpeedIn

wow animated lightSpeedOut

wow animated rotateIn

wow animated rotateInDownLeft

wow animated rotateInDownRight

wow animated rotateInUpLeft

wow animated rotateInUpRight

wow animated rotateOut

wow animated rotateOutDownLeft

wow animated rotateOutDownRight

wow animated rotateOutUpLeft

wow animated rotateOutUpRight

wow animated slideInDown

wow animated slideInLeft

wow animated slideInRight

wow animated slideOutLeft

wow animated slideOutRight

wow animated slideOutUp

wow animated slideInUp

wow animated slideOutDown

wow animated hinge

wow animated rollIn

wow animated rollOut

wow animated zoomIn

wow animated zoomInDown

wow animated zoomInLeft

wow animated zoomInRight

wow animated zoomInUp

wow animated zoomOut

wow animated zoomOutDown

wow animated zoomOutLeft

wow animated zoomOutRight

wow animated zoomOutUp

На этом всё!

Всем удачи и добра!