Категория:
Опубликовано:

Анимация на CSS3 с помощью Animate.css

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');  //Удаляем классы анимации
   });
  });
 });
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.

Комментарии

Есть модуль для drupal?