Использование Animate.css
После прочтения этой статьи у многих посетителей возник вопрос, как же на практике применять библиотеку Animate.css. В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.
1. Для начала следует скачать и подключить библиотеку. Есть три варианта.
- Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как это всё устроено.
- Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
- Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.
Далее подключаем файл animate.css через тег <link> как это делается с любым другим стилевым файлом.
<link href="animate.css" rel="stylesheet">2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта, допустим fadeInDown (список всех эффектов и их названия смотрим здесь). Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:
<img src="images/figure.jpg" alt="Винни-Пух" class="animated flash">Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.
<script>
$(document).ready(function() {
$('img').addClass('animated flash');
})
</script>3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).
Пример 1. Всплывающее сообщение
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Предупреждение</title>
<link href="style/animate.css" rel="stylesheet">
<style>
.warning {
background: #fc0;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="animated fadeInDown warning">
Зенитное часовое число оценивает экваториальный секстант!
</div>
</body>
</html>Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу <img> добавляем класс animated и подключаем jQuery (пример 2).
Пример 2. Галерея
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Галерея</title>
<link href="style/animate.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('img.animated').hover(
function() {
$(this).addClass('bounce'); // Добавляем класс bounce
},
function() {
$(this).removeClass('bounce'); // Убираем класс
}
)})
</script>
</head>
<body>
<img src="images/thumb1.jpg" alt="" class="animated">
<img src="images/thumb2.jpg" alt="" class="animated">
<img src="images/thumb3.jpg" alt="" class="animated">
</body>
</html>В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce; если курсор убрать, то класс bounce также убирается.
4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.
.animated {
-webkit-animation-duration: .6s;
-o-animation-duration: .6s;
-moz-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}