 |
| Hướng dẫn thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho blog/website |
Bạn đã quá nhàm chán với hình ảnh của con trỏ chuột mặc định. Chính vì lẽ đó trong bài viết này mình sẽ hướng dẫn các bạn thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp khi bạn click vào bất kì vùng nào trên blog/website.
Chia sẻ code thay đổi con chuột và hiệu ứng gợn nhấp cho blog/website
Có rất nhiều cách và nhiều sự lựa chọn cho việc thay đổi hình dáng con trỏ chuột. Tuy nhiên, trong bài viết này Chia Sẻ Vip sẽ hướng dẫn bạn tạo nên sự độc đáo của con trỏ chuột nhé.
Các bước thực hiện như sau:
Bước 1: Đăng nhập vào trang quản lý Blogger.
Bước 2: Vào tùy chỉnh HTML.
Bước 3: Bạn copy toàn bộ đoạn js bên dưới và dán trên thẻ <head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
Bước 4: Bạn copy toàn bộ đoạn code bên dưới và dán trên thẻ </body>
<style>
.clicker {
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
background: #21ccc9;
border-radius: 100%;
position: absolute;
transform: scale(0);
opacity: .3;
-ms-filter: none;
filter: none;
z-index: 9999;
pointer-events: none
}
.darkMode .clicker {
background: #fff
}
.clicker.is-active {
opacity: 0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
filter: alpha(opacity=0);
transition: opacity 900ms ease, transform 900ms ease;
transform: scale(1)
}
html,body{cursor:url("https://1.bp.blogspot.com/-qbWo9mPKO2Y/YL9utYdQBdI/AAAAAAAAFs4/mtjGu6u2uGwtJsT4gZG4lbhLV1a5lG6OQCLcBGAsYHQ/s0/mouse-f1.png"), auto;}
a:hover{cursor:url("https://1.bp.blogspot.com/-nYv2dLl3oXY/YL9utYBCh8I/AAAAAAAAFtA/wII4lVw5w4k-4isGMY41heTqk8U4TJujgCLcBGAsYHQ/s0/mouse-f2.png"), auto;}
</style>
<script> /*<![CDATA[*/ (function() {
var i = function(n, t) {
return window.setTimeout(t, n)
},
o = {
WebkitTransition: "webkitTransitionEnd",
MozTransition: "transitionend",
OTransition: "oTransitionEnd otransitionend",
msTransition: "MSTransitionEnd",
transition: "transitionend"
},
e = function(n, t) {
var i, o = "touchstart" === n.type.toLowerCase();
switch (t) {
case "top":
i = "pageY";
break;
case "left":
i = "pageX"
}
return (o ? n.originalEvent.touches[0] : n)[i]
};
$(document).on("mousedown touchstart", function(n) {
var t = $('<div class="clicker"></div>');
return t.css({
left: e(n, "left"),
top: e(n, "top")
}), $("body").append(t), i(0, function() {
return t.on(o[Modernizr.prefixed("transition")], function() {
return t.remove()
}), t.addClass("is-active")
})
})
}).call(this); /*]]>*/</script>
Bước 5: Bạn lưu lại và xem kết quả.
Bạn có thể thay đổi hình ảnh con trỏ chuột tùy thích bằng cách thay đổi 2 link ảnh bên trên. Hiệu ứng gợn nhấp vẫn được áp dụng trên mobile các bạn nhé.
Video hướng dẫn chi tiết thay đổi hình dáng con trỏ chuột và thêm hiệu ứng gợi nhấp.
Kết luận
Trên đây là bài chia sẻ cách thay đổi con chuột và thêm hiệu ứng gợi nhấp cho blog/website. Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về bản quyền, hãy để lại ý kiến của bạn bên dưới để mình biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.