Ви погодитесь, якщо я скажу, що анімації та ефекти - дуже важлива функція CSS3. Раніше все це було складно уявити без JavaScript. Проте зараз існує достатньо корисних бібліотек, які суттєво полегшують процес прикрашення веб- сторінки. Однією з таких бібліотек є Animate.css.
Animate.css - це бібліотека, яка містить десятки гарних крос-браузерних вбудованих анімацій, які ви можете дуже легко використати у вашому проекті.
Ідея така сама, як і з JavaScript еквівалентами, до яких ми вже звикли.
Починаємо використовувати Animate.css
Після завантаження, перше, що нам потрібно зробити. щоб почати використовувати бібліотеку - це додати CSS файл до HTML:
<link href="css/animate.min.css" rel="stylesheet">
Після цього, Вам доступні всі вбудовані анімації для виклику елемента, все що вам потрібно зробити, - дати йому клас _animated _та вказати назву анімації через пробіл.
Ознайомтесь зі спискоми анімацій.
Приклад виклику анімації:
<h1 class="animated flash">Hello</h1>
Якщо ви перезавантажте сторінку, ви відразу ж можете побачити, що H1 анімується.
Це здорово, але зазвичай потрібно анімувати елементи при натисканні кнопок або коли користувач виконує деякі дії. Якщо вам це потрібно, то ви просто можете використовувати трохи JavaScript, щоб викликати подію click і додати класи для вашого елемента.
Приклад HTML:
<button>Click</button>
<section>
Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur a felis in nunc fringilla tristique. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui.
</section>
Те, що ви хочете зробити, це анімувати розділ використовуючи зникання, коли кнопка натиснута.
Спочатку треба встановити opacity 0. Потім додати класи динамічно:
$('button').click(function() {
$('section').addClass('animated fadeInLeft');
});
Якщо потрібно, ви можете змінити швидкість анімації в CSS, наприклад так:
.animated {
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
animation-duration: 200ms;
}
Ви також можете змінити затримку в анімації і кількість повторів з допомогою animation-delay і animation-iteration-count.
Ще одна цікава річ, яку ми можемо зробити, це викликати функцію при закінченні анімації і виконувати різні анімації переходу, або просто запустити функцію. Щоб зробити це, ви повинні використовувати одну подію, і приєднати її до кінця анімації, додавши клас потрібної нам анімації до елемента. В нашому прикладі ми будемо додавати клас затримки, що дозволить нам отримати затримку між fade in і fade out:
$('section').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$('section').addClass('delay fadeOutRight');
});
Щодо CSS, все, що потрібно зробити - це додати клас затримки:
.delay {
-animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
}
Після перевірки та додавання CSS і JavaScript, ви можете бачити, що вона відбувається досконала анімацію появи, залишається протягом двох секунд на сторінці, а потім зникає. Всі анімації затримки були побудовані з використанням CSS.
Ще немає коментарів