В готовом шаблоне одного фрилансера встретил использование Animate.css - библиотеки CSS3-эффектов, созданной на самом же CSS3.
Ранее я уже встречал упоминание об этой библиотеке - Easy CSS3 Animation with Animate.css. Вот теперь пришла пора познакомиться с нею детально, что называется - на практике.
Кстати, официальная страница этого проекта расположена здесь - Animate.css. На ней можно посмотреть все возможные для этой библиотеки эффекты и подобрать подходящий в выпадающем списке.
Откровенно говоря, я приготовился к обстоятельному изучению этой библиотеки, но все оказалось предельно просто. Все, что нужно для подключения Animate.css - это скачать полную версию по ссылке Download Animate.css. Или же перейти на GitHub - View on GitHub, чтобы выбрать сжатую (1
animate.min.css
1
animate.css
Подключение Animate.css
Для подключения библиотеки Animate.css в готовый HTML-проект, достаточно подключить в “шапке” документа скачанный CSS-файл 1
animate.css
<head>
<meta charset="utf-8">
<title>Animate CSS</title>
<link rel="stylesheet" href="css/animate.css">
...
</head>И это все! Больше никаких действий не потребуется - все остальные манипуляции нужно выполнять в HTML-коде, добавляя необходимые CSS-классы из библиотеки Animate.css к нужным HTML-элементам.
Добавление CSS-классов из Animate.css
Первое, что нужно помнить - для нужного HTML-элемента необходимо добавить обязательный класс 1
.animated
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}Второе - на странице проекта подбираем для себя нужный\понравившийся эффект, запоминаем имя (пусть в данном случае это будет 1
bounceIn
1
.animated
<h1 class="animated bounceIn">
Animate.css
</h1>Все - можно проверять работу библиотеки Animate.css.
Использование jQuery c Animate.css
Если в проекте используется библиотека jQuery (а она применяется почти всегда), то применение библиотеки Animate.css еще больше упрощается, а HTML-разметка делается семантичной. Для этого подключаю библиотеку jQuery:
… и прописываю в скрипте инициализации 1
animate_me.js
$(document).ready(function() {
$('h2').addClass('animated bounceInLeft');
})Вуаля - все отлично работает!
Можно немного усложнить задачу и добавить с помощью Jquery событие 1
hover
1
img
1
rotateIn
1
animated
<figure>
<img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>$(document).ready(function() {
$('figure img').hover(
function() {
$(this).addClass('animated rotateIn');
},
function() {
$(this).removeClass('animated rotateIn');
}
)})Управление задержкой анимации
Можно управлять задержкой анимации и скоростью анимации, изменив значения в классе 1
.animated
1
animation-duration: 1s
1
animation-duration: .4s;
.animated {
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}Полный код примера на Animate.css
Полный код рассмотренного в этой статье примера привожу ниже.
<h1 class="animated bounceIn">Animate.css</h1>
<h2>animate me with jquery!</h2>
<figure>
<img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>
<!-- SCRIPTS -->$color: #778899;
h1,h2,figure{
margin: 50px auto 0;
text-align: center;
}
h1{
font: normal 72px/1.3 Georgia, sans-serif;
color: darken($color,10%);
}
h2{
font: normal 56px/1.3 Georgia, sans-serif;
color: lighten($color,5%);
text-transform: capitalize;
}
figure img:hover{
cursor: pointer;
}$(document).ready(function() {
$('h2').addClass('animated bounceInLeft');
$('figure img').hover(
function() {
$(this).addClass('animated rotateIn');
},
function() {
$(this).removeClass('animated rotateIn');
}
)})
На этом все.