Топ 9 библиотек для анимации в 2016 году

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

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

Animate.css

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

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

Bounce.js

Bounce.js – инструментарий и JS библиотека, основной фокус которой расположен на уникальной анимации гибких объектов с помощью CSS.

Bounce.js – элегантная анимационная библиотека, поставляемая с десятью заранее сохраненными шаблонами, что обеспечивает маленький размер файла. Как и в animate.css анимация выглядит плавно и безупречно. Если вам не нужен всеобъемлющий список типов анимации и если вы ищите легковесную библиотеку, то данный экземпляр можно положить к себе в копилку.

Magic Animations

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

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

DynCSS

DynCSS – библиотека, хорошо сочетающаяся с параллакс эффектом. Чтобы полностью понять возможности библиотеки, взгляните на демо.

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

CSShake

CSShake делает именно то, что написано на «коробке» — CSS библиотека для встряски элементов страницы. Как можно ожидать, есть множество разных эффектов встряски.

Apple ввела в моду эффект сильной встряски элементов пользовательского интерфейса при неправильном вводе пользователем данных (диалоговые окна, модальные или текстовые) – имитируя человеческое движение головой «нет». В CSShake целый набор интересных эффектов встряхивания, если не сказать полный.

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

Hover.css

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

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

Velocity.js

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

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

favico.js

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

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

AniJS

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

Если кликнуть на квадрат, выполнить анимацию для .container-box.

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

Заключение

Множество библиотек готовы и ждут, когда вы воспользуетесь ими в своем проекте. Перечисленные выше представляют собой горстку библиотек с лучшими показателями изощренности и стабильности работы. С одной стороны анимация, безусловно, повышает интерактивность сайта, но с другой чрезмерное ее использование может сбить с основной цели сайта и запутать пользователя. Будьте предельно аккуратны и используйте их с умом. А вы используете анимационные библиотеки в своих проектах? Какие из них ваши любимые?

Автор: Tanay Pant

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: