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


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

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

Ми зробили підбірку з 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), але однією з найпопулярніших. Набір заздалегідь заготовлених видів анімації (поворот, нахил, ротація і т. д.) робить її також однією з найлегших у використанні.

Приклад коду з використанням 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.

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


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

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