Як оживити свій сайт: 5 інструментів для анімації в сучасному WEB


Анімація – один з основних трендів в сучасному сайтостроении. Елементи анімації в інтерфейсах виносять їх юзабіліті на новий рівень, роблячи їх інтуїтивно зрозумілими і доступними звичайному користувачеві. На лендингах або, наприклад, корпоративних сайтах вона допомагає наочніше розповісти відвідувачеві про ваш продукт або показати його переваги.

Ми зробили підбірку з 5 бібліотек для створення анімації на web- сайтах, розповівши про їх переваги, недоліки і сфери застосування.

GreenSock Animation Platform

GreenSock Animation Platform чи GSAP – це, мабуть, одна з самих функціональних javascript- бібліотек для анімації. Як говорять її творці, це “новий стандарт для HTML5 анімації”. Вона має низький поріг входження, детальну документацію, високу продуктивність, гнучкість і сумісність із старими браузерами. Важливою перевагою GSAP є також те, що бібліотека уміє ” анімувати” не лише CSS або Canvas, але і будь-кого числову змінну будь-кого javascript- об’єкту.

Приклад коду на GSAP:

// збільшує висоту і ширину картинки (html елементу) TweenLite.fromTo (photo, 1.5, {width:0, height:0}, {width:100, height:200};

З іншого боку, GSAP є відносно важкою, тому для створення невеликої анімації HTML елементів (зникнення, поява, переворот і так далі) краще скористатися більше легковагими аналогами.

Tween.js

Tween.js є доповненням до easel.js – одному з найпопулярніших javascript- фреймворков для зручної і легкої роботи з canvas. Проте, tween не має ніяких залежностей і може використовуватися як разом, так і окремо від easel.

Як ви, напевно, вже здогадалися, основне завдання бібліотеки tween.js – це анімація в Canvas. І вона відмінно з нею справляється, роблячи за вас і спрощуючи багато речей. Ось, наприклад, код, який ” ганяє” по екрану круг, міняючи при цьому його прозорість:

createjs.Tween.get (circle, { loop: true }) .to ({ x: 400 }, 1000, createjs.Ease.getPowInOut (4)) .to ({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut (2)) .to ({ alpha: 0, y: 225 }, 100)
.to ({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut (2)) .to ({ x: 100 }, 800, createjs.Ease.getPowInOut (2));

Але при цьому для анімації HTML елементів tween.js абсолютно не підходить – з цим справляються наступні два інструменти.

Move.js

Move.js – javascript- бібліотека, що дозволяє робити все те ж, що і tween.js, тільки з використанням CSS3 і HTML5 замість Canvas. Вона є не найлегшою (як для JS), але одній з найпопулярніших. Набір заздалегідь заготовлених видів анімації (поворот, нахил, ротація і тд.) робить її також одній з найлегших у використанні.

Приклад коду c використанням Move.js:

move ('#example - 4 .box') .rotate (140) .end ();


Ознайомитися з демонстрацією роботи і документацією можна на цій сторінці.

WOW.js + Animate.css

Насправді це не справжні бібліотеки або фреймворки для анімації, принаймні в звичному розумінні.

Animate.css – усього лише CSS файл, в якому зібрані декілька десятків правил, пов’язаних з анімаціями, а WOW.js – усього лише маленький скрипт, що запускає ці анімації у міру прокрутки сторінки.

Проте, разом ці два скрипти являються, мабуть, кращим способом змусити HTML елементи рухатися, або, кажучи іншими словами, анімувати їх.

По-перше, вирішує легковагість. Всього 2 КБ і ніяких залежностей!

По-друге, wow.js і animate.css є украй простими у використанні. Швидше за все, вам не доведеться написати ні рядки зайвого JS коду. Досить підключити ці два скрипти до сторінки і додати до елементу, який треба анімувати, пару css класів: клас wow і клас потрібної нам анімації.

Приклад:

Тепер при завантаженні сторінки замість статичного відображення цей елемент красиво крутитиметься:

Для налаштування анімації використовуються спеціальні data- атрибути, наприклад, data – wow – duration=” 2s” задасть тривалість кручення в 2 секунди.

Демо, детальнішу документацію і повний список data- атрибутів можна знайти на офіційному сайті WOW.js, повний список класів анімації – на офіційному сайті Animate.js.

Анімація засобами JQuery

За статистикою, майже 50% сайтів використовують JQuery. Якщо ваш сайт входить в їх список і у вас теж підключена ця популярна бібліотека, то, можливо, варто не винаходити велосипеди, а скористатися вбудованими в неї засобами анімації?

Це можуть бути як стандартні $.show (), $.hide (), $.fadeIn (), $fadeOut і так далі, так і функція $.animate (), яка дозволяє створювати набагато складніші анімації.

Детальніше про анімацію в JQuery можна почитати тут.

Варто також згадати про бібліотеку Velocity.js, яка надає таке ж API для анімації як і JQuery, але при цьому ніяких залежностей не має. Згодиться тим, кому потрібна анімація з JQuery, але сам JQuery не потрібний.

Отже, підведемо підсумки:

Я хочу зробити анімацію.

І у Canvas, і в HTML: GSAP.

Тільки у Canvas: tween.js.

Тільки у HTML: WOW.js + Animate.css чи Move.js.

У HTML, і мій сайт використовує JQuery: JQuery Effects.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *