Mo.js: анимация иконок

demosourse

Возможно вы слышали о mo.js — мощнейшей библиотеке для реализации анимации. Если нет, то этот презентационный пост для вас.

В наших примерах мы применяем анимационные эффекты к иконкам, типа “в закладки”, “мне нравится” и т.д. Вы же сможете применить их к любым элементам страницы.

Давайте взглянем на пример. Используем иконку из пакета Font Awesome:

<button class="icobutton icobutton--thumbs-up">
<span class="fa fa-thumbs-up"></span>
</button>

Определить анимацию можно следующим образом:

var scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
var el = document.querySelector('.icobutton'),
elSpan = el.querySelector('span'),
// объект mo.js
timeline = new mojs.Timeline(),

// анимация:

// “взрыв”
tween1 = new mojs.Burst({
parent: el,
duration: 1500,
shape : 'circle',
fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
x: '50%',
y: '50%',
opacity: 0.6,
childOptions: { radius: {20:0} },
radius: {40:120},
count: 6,
isSwirl: true,
isRunLess: true,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
// “кольцо”
tween2 = new mojs.Transit({
parent: el,
duration: 750,
type: 'circle',
radius: {0: 50},
fill: 'transparent',
stroke: '#988ADE',
strokeWidth: {15:0},
opacity: 0.6,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}),
// масштабирование
tween3 = new mojs.Tween({
duration : 900,
onUpdate: function(progress) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
}
});

// добавляем эффекты:
timeline.add(tween1, tween2, tween3);

// при клике по кнопке активируем анимацию:
el.addEventListener('mouseenter', function() {
timeline.start();
});

Надеемся, данный пост будет вам полезен.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2016/02/23/icon-animations-powered-by-mo-js/
Перевел: Станислав Протасевич
Урок создан: 7 Апреля 2016
Просмотров: 14541
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^