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

Website 25/08/2020

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

Bài viết này hướng dẫn tạo hiệu ứng đơn giản khi bấm (click) vào Icon Thumb Up (ví dụ như nút Like của Facebook). Còn rất nhiều hiệu ứng và cách sử dụng khác bạn có thể tự mình khám phá để áp dụng cho website của mình.

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>

Tham khảo dịch vụ thiết kế website của chúng tôi.

Thiết Kế Website

Website thu hút thêm nhiều khách hàng với chi phí thấp, giúp đẩy mạnh hoạt động bán hàng mọi lúc mọi nơi, triển khai các chiến lược marketing hiệu quả và đặc biệt là nâng tầm uy tín, giá trị thương hiệu và giảm chi phí kinh doanh.

Giao diện hiện đại

Hoạt động ổn định

Tối ưu hóa công cụ tìm kiếm

Tối ưu trải nghiệm người dùng

Xem Chi Tiết

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!

Trước:
Tạo ảnh động (GIF) bằng Photoshop

Tiếp:
Hướng dẫn làm phụ đề (subtitle) cho video

Thủ Thuật