hí xin chào mọi người, lại là kimi đây, nay thì mình xin chia sẽ cho mọi người một cái code mới. với code này thì chúng ta sẽ tạo ra cho mình một hiệu ứng bóng con chuột cực kì đẹp mắt lun nhá.
các bạn có thể xem hình ảnh bên dưới minh họa về con trỏ này.
|
| Tạo hiệu ứng bóng con trỏ chuột ( cursor ) cho website |
chúng ta sẽ không sử dụng hình thức hình ảnh để hiển thị và cũng như đổi con trỏ khi hover. mà chúng sẽ sử dụng Javascript để làm biến đổi nó. nó sẽ tạo cho chúng ta một hiệu ứng như bong bóng độc đáo và thú vị nữa nha mọi người ơi.
mọi người cũng có thể test code này ngay lại bài viết này của mình nữa nha.
okiii bắt đầu làm thôi nha.
bước 1: thêm đoạn code bên dưới vào phía sau thẻ <body> hoặc phía trên thẻ </body>
<div class='mouse-cursor cursor-outer'></div>
<div class='mouse-cursor cursor-inner'></div>
bước 2: thêm đoạn css bên dưới vào trong cặp thẻ
<body> ..... </body>
hoặc
<head> ..... </head>
hoặc nếu dùng file css riêng thì dán code
bên dưới vào trong file css đó
<style>
.mouse-cursor{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;-webkit-transform:translateZ(0);transform:translateZ(0);visibility:hidden}
.cursor-inner{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:10000001;background-color:#CED0D4;-webkit-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out}
.cursor-inner.cursor-hover{margin-left:-30px;margin-top:-30px;width:60px;height:60px;background-color:#CED0D4;opacity:.3}
.cursor-outer{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid #CED0D4;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:10000000;opacity:.5;-webkit-transition:all .08s ease-out;transition:all .08s ease-out}
.cursor-outer.cursor-hover{opacity:0}
</style>
bước 3: chèn đoạn Javascript bên dưới
vào phía trên thẻ
</body>
<script>//<![CDATA[
$(function () {
'use strict';
var _window = $(window);
var screenWidth = _window.width();
if (screenWidth > 991) {
var myCursor = jQuery('.mouse-cursor');
if (myCursor.length) {
if ($("body")) {
const e = document.querySelector(".cursor-inner"),
t = document.querySelector(".cursor-outer");
let n, i = 0,
o = !1;
window.onmousemove = function (s) {
o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"), e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)", n = s.clientY, i = s.clientX
}, $("body").on("mouseenter", "a, .cursor-pointer", function () {
e.classList.add("cursor-hover"), t.classList.add("cursor-hover")
}), $("body").on("mouseleave", "a, .cursor-pointer", function () {
$(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove("cursor-hover"), t.classList.remove("cursor-hover"))
}), e.style.visibility = "visible", t.style.visibility = "visible"
}
}
}
});
//]]></script>
lưu ý: thêm class cursor-pointer vào vị trí bạn muốn hiển thị thêm hiệu ứng khi di chuyển chuột vào. không thì các bạn để mặc định mặc định cũng được
bước 4: lưu lại và tận hưởng thành quả
5 phút cuộc đời đọc bài viết này nào.
okii thì mình vừa chia sẽ cho các bạn code tạo bóng con trỏ chuột cực kì
hay và thú vị. nếu như có thắc mắc gì hay không làm được vui lòng comment
thắc mắc bên dưới mình sẽ giải đáp cho các bạn trong trong thời gian ngắn
nhất nhá.
chúc các bạn thành công nhe.
Design by @KiMiDev
