Mo.js: анимация иконок
Возможно вы слышали о 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
Просмотров: 14654
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.