Анимация иконок с помощью mo.js

Анимация иконок с помощью mo.js

От автора: Различная анимация для иконок с помощью библиотеки mo.js, очень мощной библиотеки анимации от Oleg Solomka. Oleg вдохновлялся Dribbble шотом «Like Animation» от Daryl Ginn.

 

скачать исходникидемо

Возможно, вы уже сталкивались с mo.js, очень мощной библиотекой графической анимации от Oleg Solomka. С ее помощью можно делать тонны удивительной анимации, и сегодня мы хотели бы поделиться с вами своей анимацией иконок.

Было бы действительно хорошо уметь легко анимировать иконки наподобие лайка в Twitter, а после того, как мы увидели гибрид Dribbble shot от Daryl Ginn (так будет выглядеть анимация лайка Twitter, если бы она была реализована в facebook*), мы захотели попробовать совместить mo.js с веб-шрифтом Font Awesome от Dave Gandy и посмотреть, что из этого получится.

Мы анимировали иконки действий, там, где можно наблюдать активное состояние. К примеру, «любимый», «лайк» или «плюс». Чисто теоретически эффекты можно применить к любым иконкам, но к иконкам действий данная анимация подходит намного лучше.

Библиотека mo.js действительно очень проста в использовании. Пока доступен всего один урок, но вы уже можете получить представление о том, как контролировать тайминг функции на элементах. Библиотека открывает множество возможностей и позволяет создавать сложную, реалистичную анимацию. В репозитории GitHub вы сможете найти больше информации, а также помочь в работе.

Предупреждение: Мы создали сумасшедшую, где-то бессмысленную и через-чур сложную анимацию! Используйте на свой страх и риск 😉

Рассмотрим пример. Мы подключили иконочный шрифт Font Awesome и добавили иконку в кнопку:

В стилях можно сбросить пару свойств и добавить размеры кнопки. А задать анимацию можно так:

Обратите внимание, что мы используем фиксированные размеры для эффекта. В более гибком варианте можно задавать размеры динамически. А теперь сделайте свою анимацию; возможности безграничны! Надеемся, вам понравилась анимация, и на ее основе вы придумаете что-то свое! Проект на Github.

Автор: Mary Lou

Источник: //tympanus.net/

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

* Признана экстремистской организацией и запрещена в Российской Федерации.

Метки:

Похожие статьи:

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