Hướng dẫn cách thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho Blogger/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.
 |
| Hướng dẫn cách thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho Blogger/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkRaroYUIwIgEkwS94fkqorlAzewLiHBj3vrtNPYyaV_uNC3GzbCiMzxjYpbiTVW1Uiw_ts2Br4XI0I8KBzroKG5H-NeUatpqCTKGTLAHgxTn8u6WE_qieE0_m_hY7jznL2OgqxIU0uoz/s0/mouse-f1.png"), auto;}
a:hover{cursor:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_Ao58NwGm2lSh8yfOyG0i0D1IeFS3ruoahzz-JYJIX4G6pPLjcx3Qp5rZr_TSxw_66uuW5QvOAMhmZSj6cYWCfughKW9bl3mMWdaR7BLpLoa3HRdd86b_oqUo127xCQBntCMv2zkbGje/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ả.
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ả.
Ví dụ: https://www.blogspotvn.net/2019/05/cong-cu-tao-nhanh-code-thay-tro-chuot.html
<style>
.clicker {
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
background: #21ccc9;
border-radius: 100%;
position: absolute;
transform: scale(0);
opacity: .3;
transition: opacity 900ms ease, transform 900ms ease;
z-index: 9999;
pointer-events: none;
}
.clicker.is-active {
opacity: 0;
transform: scale(1);
}
</style>
<script>
document.addEventListener("mousedown", function(event) {
var clicker = document.createElement("div");
clicker.classList.add("clicker");
clicker.style.left = event.clientX + "px";
clicker.style.top = event.clientY + "px";
document.body.appendChild(clicker);
setTimeout(function() {
clicker.classList.add("is-active");
setTimeout(function() {
clicker.remove();
}, 900);
}, 0);
});
</script>
https://blogspotvn.github.io/test/click.html