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.
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.

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!