Анимация иконок с помощью 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 и посмотреть, что из этого получится.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

Автор: Mary Lou

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree