Bài viết này hướng dẫn tạo hiệu ứng cho Icon đơ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á.
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!
Không có bình luận.