Анимация на CSS3 с помощью Animate.css
Анимация на CSS еще недавно было сродни фантастике.
Но, уже сейчас, CSS3 плотно ворвался в наши трудовые будни своими transition, transform и прочими мимимишками.
С их помощью уже создаются целые библиотеки анимаций, в этом посте мы рассмотрим одну из таких.
Замечательный разработчик Daniel Eden, создавший библиотеку Animate.css, с помощью которой можно анимировать элементы HTML.
Официальная страница проекта, на которой можно посмотреть Demo эффектов здесь. Скачать библиотеку можно там же, или с Git'а.
Библиотека представляет из себя css-файл, который необходимо подключить к странице которую необходимо анимировать.
Для анимации элемента ему необходимо присвоить класс "animated" и класс с названием анимации.
Изначально, анимация происходит при загрузке элемента, единожды. Если нужно задействовать какой-либо эффект при определенных событиях - можно воспользоваться простеньким js кодом.
Рассмотрим небольшой пример.
Создаем страничку со следующим содержанием:
<!DOTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animate.css - Анимация на CSS3 | Песочница</title>
<link rel="stylesheet" type="text/css" href="/sbx/animatecss/animate.css">
<style>
body {}
#block{
padding: 20px;
width: 500px;
margin: 0 auto;
height: 400px;
background: #ccc;
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></scri... <script type="text/javascript">
jQuery(function($){
$(document).ready(function() {
$('h1').mouseenter(function(){
$(this).addClass('animated bounceIn');
});
$('h1').mouseleave(function(){
$(this).removeClass('animated bounceIn');
});
});
});
</script>
</head>
<body>
<div id="block">
<h1>Заголовок блока</h1>
<p>Блок 1</p>
</div>
</body>
</html>При наведении мыши на заголовок, будет произведен эффект анимации "bounceIn".
В этом примере мы сделали следующее:
Подключили библиотеку Animate.css:
<link rel="stylesheet" type="text/css" href="/sbx/animatecss/animate.css">Подключили jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>Установили присвоение и удаление классов анимации при наведении и удалении мыши на заголовке:
jQuery(function($){
$(document).ready(function() {
$('h1').mouseenter(function(){ //Наводим мышь на заголовок H1
$(this).addClass('animated bounceIn'); //Присваиваем классы анимации
});
$('h1').mouseleave(function(){ //Уводим мышь с заголовка H1
$(this).removeClass('animated bounceIn'); //Удаляем классы анимации
});
});
});
Комментарии