Tạo hiệu ứng cho Icon với mo.js

Xem demo Tải về

Chuẩn bị

Để tạo các hiệu ứng cho Icon, bạn cần sử dụng Font Awesome và mo.js. Chèn đoạn mã sau vào trước </head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Mặc dù mo.js hoàn toàn là JavaScript, nhưng để tiện sử dụng, bạn nên dùng thêm jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

HTML

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

CSS

.icobutton {
    font-size: 5em;
    position: relative;
    margin: 0;
    padding: 0;
    color: #c0c1c3;
    border: 0;
    background: none;
    overflow: visible;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.icobutton:hover, .icobutton:focus {
    outline: none;
}

JavaScript (jQuery)

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'),
timeline = new mojs.Timeline(),
tween1 = new mojs.Burst({
    parent : el,
    duration : 1500,
    shape : 'circle',
    fill : ['#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
    opacity : 0.6,
    childOptions : {radius : {20 : 0}},
    radius : {40 : 120},
    count : 6,
    isSwirl : 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,
    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('click', function() {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        $(this).css('color', 'rgb(192, 193, 195)');
    } else {
        timeline.replay();
        $(this).addClass('active');
        $(this).css('color', 'rgb(152, 138, 222)');
    }
});

Các bạn có thể tham khảo thêm rất nhiều hiệu ứng khác tại đây. Chúc các bạn thành công!