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ị.

Thêm hiệu ứng cursor cho trang web của bạn thêm 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.

6 comments

  1. chả làm được ad ơi
    1. Bạn xem lại làm đúng theo hướng dẫn.
  2. code bị dì rồi ad ơi. em chèn code vào mà ấy không được nó ko hiện. mong ad giúp.
    1. Không có gì lỗi hết nhé! https://www.toilablogger.com
  3. hazzz bước 3 có khúc đọc chả hiểu ad ơi. ko được
    1. Nó giống như thẻ a vậy mặc định nó là cursor pointer bạn thêm class đó vào những vị trí như thẻ button các thứ.