Топ 9 бібліотек для анімації в 2016 році

19

Від автора: сучасний інтернет переповнений дивно, що залучає увагу анімацією. Сьогодні у веб-розробників є широкий набір інструментів для залучення уваги, розваги, інформування та напрямки користувачів, а анімація лише допомагає нам у досягненні цієї мети.

Ще 10 років тому, аби додати інтерактивності сайту, розробники використовували Adobe Flash. Проте із швидким розвитком HTML5, CSS3 і міріад JS бібліотек Flash на даний момент відійшов на задній план (на щастя?). 2015 рік був багатий на безкоштовні бібліотеки для анімації, і сьогодні я розповім про 9 бібліотек і зроблю акцент на простоту використання, можливості та загальну популярність.

Animate.css

Animate.css – одна з найпростіших у використанні CSS бібліотек для анімації. Додати бібліотеку так само просто, як звичайний CSS клас до HTML-елемента. Також можна використовувати JQuery для виклику анімації за певних подій.

Топ 9 бібліотек для анімації в 2016 році

Творець: Daniel Eden

Дата випуску: 2013

Поточна версія: 3.4.0

Популярність: 25,000+ зірок на GitHub

Опис: «Кросбраузерна бібліотека CSS-анімації. Дуже проста у використанні.»

Розмір бібліотеки: 55.2 Кб

GitHub: https://github.com/daneden/animate.css

Ліцензія: MIT

Animate.css одна з найбільш популярних і широко використовуваних CSS бібліотек для анімації. Крім того, минифицированная версія досить мала для підключення бібліотеки на мобільних версій сайтів. Особисто я вважаю, що це одна з кращих анімаційних бібліотек, з якими мені доводилося стикатися. Настійно рекомендую скористатися їй в своєму наступному проекті.

Bounce.js

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

Топ 9 бібліотек для анімації в 2016 році

Творець: Tictail

Дата випуску: 2014

Поточна версія: 0.8.2

Популярність: 3,500+ зірок на GitHub

Опис: «Створюйте гарну CSS3 анімацію миттєво.»

Розмір бібліотеки: 16 Кб

GitHub: https://github.com/tictail/bounce.js

Ліцензія: MIT

Bounce.js – елегантна анімаційна бібліотека постачається разом із десятьма заздалегідь збереженими шаблонами, що забезпечує маленький розмір файлу. Як і в animate.css-анімація виглядає плавно і бездоганно. Якщо вам не потрібен всеосяжний список типів анімації і якщо ви шукайте легковажну бібліотеку, то даний екземпляр можна покласти до себе в скарбничку.

Magic Animations

Magic Animations – одна з найбільш вражаючих бібліотек. В її арсеналі величезний набір різних анімацій, багато з яких унікальні. Як у випадку з Animate.css, для підключення бібліотеки необхідно лише підключити CSS файл. Також можна використовувати анімацію через JQuery. У проекту відмінне демо.

Топ 9 бібліотек для анімації в 2016 році

Творець: Christian

Дата випуску: 2014

Поточна версія: 1.1.0

Популярність: 3,400+ зірок на GitHub

Опис: «CSS3 анімація з особливими ефектами.»

Розмір бібліотеки: 36,5 Кб

GitHub: https://github.com/miniMAC/magic

Magic animations має досить невеликий розмір порівняно з animate.css, і отримала популярність завдяки своїй фірмовій анімації, такий як ефекти magic, foolish і bomb. Якщо ви шукайте щось незвичайне, то я б порекомендував вам скористатися бібліотекою у вашому наступному проекті. Розчаровані ви не будете.

DynCSS

DynCSS – бібліотека, добре поєднується з паралакс ефектом. Щоб повністю зрозуміти можливості бібліотеки, погляньте на демо.

Топ 9 бібліотек для анімації в 2016 році

Творець: Vittorio Zaccaria

Дата випуску: 2014

Поточна версія: 0.8.1

Популярність: 190+ зірок на GitHub

Опис: «Оживіть свій сайт за допомогою динамічної CSS-анімації.»

GitHub: https://github.com/vzaccaria/DynCSS

DynCSS – проста бібліотека, яка може стати дуже популярною в недалекому майбутньому. На даний момент це досить новий проект, як видно за кількістю зірок на GitHub. Одна з особливостей цієї бібліотеки ефект обертання елементів одночасно з прокруткою. Даний ефект Vittorio чудово демонструє на домашній сторінці DynCSS (чудово підходить під паралакс ефект).

CSShake

CSShake робить саме те, що написано на «коробці» — CSS бібліотека для струсу елементів сторінки. Як можна очікувати, є безліч різних ефектів струсу.

Топ 9 бібліотек для анімації в 2016 році

Творець: Lionel

Дата випуску: 2014

Популярність: 2,000+ зірок на GitHub

Опис: «CSS класи для переміщення елементів DOM!.»

Розмір бібліотеки: 78,8 Кб

GitHub: https://github.com/elrumordelaluz/csshake

Ліцензія: MIT

Apple ввела в моду ефект сильного струсу елементів користувальницького інтерфейсу при неправильному введенні користувачем даних (діалогові вікна, модальні або текстові) – імітуючи людське рух головою «ні». У CSShake цілий набір цікавих ефектів струшування, якщо не сказати повний.

Хоча бібліотека на даний момент популярнішим ніж DynCSS, мені здається, що розмір не можна порівняти з можливостями. Анімація виглядає чудово, однак я не можу уявити стільки випадків, коли б мені довелося підключити ще одну бібліотеку для нейтралізації трясіння. Хоча може бути у мене просто поганий уяву?

Hover.css

Hover.css – CSS бібліотека для анімацій, кнопок і інших елементів інтерфейсу вашого сайту. Серед анімації є дійсно хороший ефект 2D трансформації, а також і інші відмінно зроблені ефекти.

Топ 9 бібліотек для анімації в 2016 році

Творець: Ian Lunn

Дата випуску: 2014

Популярність: 10,700+ зірок на GitHub

Опис: «Додайте анімацію своїм елементів інтерфейсу, модифікуйте або використовуйте її для натхнення.»

Розмір бібліотеки: 104,2 Кб

GitHub: https://github.com/IanLunn/Hover

Ліцензія: MIT

Hover.css, як йдеться на головній сторінці бібліотеки, відмінно підходить для анімацій, кнопок, логотипів, SVG компонентів або вбудованих зображень. Досить великий розмір пояснюється повним списком всілякої анімації (хоча я все ще думаю, що бібліотека могла б бути більш оптимізована). Мабуть найбільш відомі ефекти це bubbles і curls.

Velocity.js

Velocity.js – складна JS бібліотека для створення таких ефектів, як Fade & Slide, Scroll, Stop, Finish, Reverse і ще безлічі інших ефектів. Величезний список компаній типу Tumblr, WhatsApp, MailChimp, Scribd, Gap і HTC, а також звичайні користувачі використовують цю бібліотеку.

Топ 9 бібліотек для анімації в 2016 році

Творець: Julian Shapiro

Дата випуску: 2014

Поточна версія: 1.2.2

Популярність: 8,700+ зірок на GitHub

Опис: «Експрес JavaScript анімація.»

Розмір бібліотеки: 34,8 Кб

GitHub: https://github.com/julianshapiro/velocity

Ліцензія: MIT

Velocity підійде не всім, так як в її основі лежить JavaScript анімація, а движок анімації використовує схожу з JQuery API $.animate(). Працює бібліотека як з JQuery, так і без нього. Причина, по якій я включив бібліотеку в цей список, це неймовірна швидкість і можливість анімувати кольору, трансформувати об’єкти, створювати цикли і функції зацикленості – краще всього поєднується з JQuery, CSS властивість transition.

favico.js

Favico.js призначена для дуже специфічних випадків: з її допомогою можна замінити стандартний фавикон на анімований, анімована іконка вибирається з масиву. Веб-додатки, яким необхідно повідомляти про новий контент – тобто нові твіти, email и, пости, статті і т. д. – дійсно можуть виграти від використання цієї бібліотеки. Щоб більш детально розібратися в можливості фреймворка, подивіться демо на їх сайті.

Топ 9 бібліотек для анімації в 2016 році

Творець: Miroslav Magda

Дата випуску: 2013

Поточна версія: 0.3.9

Популярність: 4,900+ зірок на GitHub

Опис: «Замініть свій фавикон на значок, зображення або відео.»

Розмір бібліотеки: 8,9 Кб

GitHub: https://github.com/ejci/favico.js

Ліцензія: MIT

Favicon.js це більше ніж просто бібліотека для анімації фавиконов і додати їм значків, зображень і відео. Розмір бібліотеки добре оптимізований для її використання в проектах.

AniJS

Наступна наша бібліотека цікава нам з-за її унікального підходу. AniJS – бібліотека, з допомогою якої можна додавати анімацію елементів у форматі:

Якщо клікнути на квадрат, виконати анімацію .container-box.

Творець: anijs

Дата випуску: 2014

Поточна версія: 0.9.3

Популярність: 2,500+ зірок на GitHub

Опис: «Бібліотека для поліпшення веб-дизайну без додаткового кодинга.»

Розмір бібліотеки: 10,5 Кб

GitHub: https://github.com/anijs/anijs

Ліцензія: MIT

AniJS — бібліотека з відмінним балансом розмір-функціонал. Формат застосування може бути абсолютно різний порівняно з іншими анімаційними бібліотеками (багато хто може сказати, що підходи нешаблонны). Дану бібліотеку варто спробувати хоча б один раз у своїх проектах. Безумовно, ця бібліотека не може змагатися з іншими, але у неї є потенціал для зростання в майбутньому.

Висновок

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