Site icon Vavik96

Animate.css – эффектные анимации на чистом CSS

admin

С появлением CSS 3, красивые эффекты стали нормой на сайтах, к сожалению, создавать красивые анимации, которые бы работали во всех браузерах – дано не каждому.
И для этих людей, у меня есть отличное решение =)

Animate.css – это библиотека собравшая в себе более 60 красивых CSS-анимаций, она кроссбраузерна, и крайне удобна в использовании. Просто подключите ее к вашей странице, и добавьте пару классов к необходимому элементу, а теперь поподробней.

Установка

Для начала скачайте саму библиотеку 
В архиве нам понадобятся 2 файла:
animate.css – обычный 
animate.min.css – сжатый
Примеры доступных эффектов можно посмотреть на сайте автора 
Подключаем библиотеку к нашей странице, с помощью тега link

<link rel="stylesheet" href=" animate.min.css">

Теперь мы можем использовать Animate.css, для этого нужно добавить 2 класса “animated” и класс необходимого эффекта.

Начнем с простого:

<h3 class="animated shake">Пример 1, обычная анимация при загрузке страницы</h3>

Сюда же можно добавить 3 класс «infinite», если вы хотите что бы анимация не заканчивалась

<h3 class="animated shake infinite">Пример 2, бесконечная анимация</h3>

 

Как установить задержку перед анимацией?

Теперь давайте научимся дополнительно настраивать нашу анимацию. Есть несколько свойст CSS 3, которые нам в этом помогут. Можно добавить их в отдельный CSS-файл, или включить прямо в тело нашей страницы с помощью тега «style» (обычно так не делают, но для примера сойдет).
Сами свойства:
animation-duration – продолжительность анимации,
animation-delay – задержка перед анимацией,
animation-iteration-count – количесво повторений, можем поставить число, или infinite – для бесконечных повторений.
Попробуем для начала изменить продолжительность анимации (не забываем про префиксы для браузеров):

<h3 id="pr3" class="animated shake">Пример 3, изменили продолжительность</h3>
    <style>
    #pr3{
        -webkit-animation-duration: 2s;
        -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-duration: 2s;
    }
    </style>

Теперь давайте установим задержку в 2 секунды, а количесво повторений в 5:

 <h3 id="pr4" class="animated shake">Пример 4, задержка анимации 2 секунды, повторяется 5 раз</h3>
    <style>
    #pr4{
        -webkit-animation-delay: 2s;
        -moz-animation-delay: 2s;
        -o-animation-delay: 2s;
        animation-delay: 2s;
        
        -webkit-animation-iteration-count: 5;
        -moz-animation-iteration-count: 5;
        -o-animation-iteration-count: 5;
        animation-iteration-count: 5;
    }
    </style>

Все замечательно работает, но применение библиотеки сильно ограниченно. Как это решить? Давайте добавим немножно JQuery!
Скачиваем актуальную версию здесь, и подключаем в  разделе head:

<script src="jquery-1.11.3.min.js"></script>

Теперь давайте шаманить =)
Самый частый вариант использования такой связки, вызов анимации при клике на объекте, для этого, мы отловим когда произойдет нажатие по объекту, и добавим к нему необходимые классы.

<h3 id="pr5">Пример 5, анимация по клику</h3>
    <script>
    $('#pr5').click(function() {
        $('#pr5').addClass('animated shake');
    });
    
    </script>

Так же, можно вызывать анимацию при наведении мыши:

 <h3 id="pr6">Пример 6, анимация по клику</h3>
    <script>
    $('#pr6').hover(
        function() {
            $(this).addClass('animated shake');
        },
        function() {
            $(this).removeClass('animated shake');
        }
    );
    </script>

 

C помощью JQuery можно отследить когда закончится анимация, и сделать что-нибудь еще, например, вызвать другую анимацию, или изменить свойства объекта:

<h3 id="pr7">Пример 7, анимация по клику, затем вызов еще одной анимации</h3>
    <script>
        $('#pr7').click(function() {
            $('#pr7').addClass('animated shake');
        });
        
        $('#pr7').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $('#pr7').addClass('fadeOut', function() {$('#pr7').hide();});
        });
    </script>

Что здесь происходит:

  1. Мы вызываем анимацию по клику
  2. Отлавливаем ее завершение с помощью функции .one
  3. Вызываем еще одну анимацию, в конце которой прячем объект

Как по мне, получилось здорово =)
Еще одна крутая фишка, которую можно сделать с Jquery, это
Анимация при прокрутке:

 <h3 id="pr8">Пример 8, анимация при прокрутке</h3>
    <script>
        $(window).scroll(function() {
        $('#pr8').each(function(){
          if ($(this).offset().top < $(window).scrollTop()+300) {
            $(this).addClass('animated wobble');
          }
        });
      });
    </script>

Скрипт достаточно простой, мы следим пока наш элемент не появится на странице, и добавляем к нему класс анимации.
Источник

Exit mobile version