Thêm hiệu ứng cursor cho trang web của bạn thêm thú vị
Hiệu ứng này tạo thêm tương tác cho con trỏ chuột, nó thay đổi khi bạn di chuyển chuột vào một liên kết hoặc một khu vực nào đó do bạn quyết định làm cho trang web của bạn thêm phần thú vị.
Bài viết này mình sẽ chia sẻ mọi người một hiệu ứng khá thú vị mà mình đang sử dụng ngay trên blog của mình. Hướng dẫn các bạn làm theo các bước bên dưới nhé!
Bước 1: Thêm code html sau vào sau thẻ <body> hoăc trước thẻ </body>.
<div class='mouse-cursor cursor-outer'></div>
<div class='mouse-cursor cursor-inner'></div>
Bước 2: Thêm code css sau vào trong theme của bạn thường ở giữa thẻ <body>...</body> hoặc <head>...</head> tuỳ theo trang web của bạn.
<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 script sau trước thẻ đóng </body>.
<script>//<![CDATA[
$(function () {
'use strict';
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>
Phần này các bạn lưu ý thêm class cursor-pointer vào vị trí bạn muốn thêm hiệu ứng khi di chuyển chuột vào.
Bước 4: Lưu thay đổi là xong.
