html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создание анимации с Animate.css

Несмотря на все трудности возникающие при создании анимации, безусловно стоит стремиться к получению навыков,  приобретению уверенности и достижению мастерства в этой области. Ден Эден – дизайнер и студент из Манчестера (Великобритания) —  создал своеобразную библиотеку анимации Animate.css. По его словам, изначально идея возникла для оптимизации собственного времени на разработку проектов, а затем приобрела большие масштабы. Теперь все желающие могут ознакомиться с ней и использовать в своих проектах.

«При реализации нескольких своих проектов я работал с анимацией CSS3 по ключевым кадрам и заметил, что повторяю код. Чтобы не делать это в будущем я начал создавать анимационную библиотеку. После завершения я был доволен собой и выпустил код на GitHub, где его и можно взять».

Как же на практике применять библиотеку Animate.css? В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.

1. Для начала следует скачать и подключить библиотеку. Есть три варианта.

  • Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит для первого этапа ознакомления с анимацией в целом, поскольку позволяет разобраться в том, как это всё устроено.
  • Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
  • Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.

Далее подключаем файл animate.css через тег <link> как это делается с любым другим стилевым файлом.

<link href="style/animate.css" rel="stylesheet">

2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта. Например, вы хотите добавить мерцание ко всем изображениям на странице. В 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> 

          $(document).ready(function () { 
          $('img.animated').hover(
           function () {
           $(this) .addClass('bounce');  // Добавляем класс bounce
           },
           function () {
           $(this) .removeClass('bounce');  // Убираем класс 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;
 } 

 

Стоит отметить, что эффекты, представленные в Animate.css удобнее, быстрее и изящнее, чем некоторые из аналогичных в JavaScript. И если вы хотите получить несколько быстрых эффектов, Animate.css - отличный выбор.

Автор — htmlbook.ruAnimate.css.

Смотрите также:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

36
    +18 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции