60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
export default function Mouse() {
|
|
useEffect(() => {
|
|
function mouseCursor() {
|
|
const cursorInner = document.querySelector(".cursor-inner");
|
|
const cursorOuter = document.querySelector(".cursor-outer");
|
|
let clientX = 0;
|
|
let clientY = 0;
|
|
let isHovering = false;
|
|
|
|
window.addEventListener("mousemove", function (event) {
|
|
clientX = event.clientX;
|
|
clientY = event.clientY;
|
|
|
|
if (!isHovering) {
|
|
cursorOuter.style.transform = `translate(${clientX}px, ${clientY}px)`;
|
|
}
|
|
cursorInner.style.transform = `translate(${clientX}px, ${clientY}px)`;
|
|
});
|
|
|
|
document.body.addEventListener(
|
|
"mouseenter",
|
|
function (event) {
|
|
if (event.target.matches("a, .cursor-pointer")) {
|
|
cursorInner.classList.add("cursor-hover");
|
|
cursorOuter.classList.add("cursor-hover");
|
|
}
|
|
},
|
|
true
|
|
);
|
|
|
|
document.body.addEventListener(
|
|
"mouseleave",
|
|
function (event) {
|
|
if (event.target.matches("a, .cursor-pointer")) {
|
|
cursorInner.classList.remove("cursor-hover");
|
|
cursorOuter.classList.remove("cursor-hover");
|
|
}
|
|
},
|
|
true
|
|
);
|
|
|
|
cursorInner.style.visibility = "visible";
|
|
cursorOuter.style.visibility = "visible";
|
|
}
|
|
|
|
// Initialize the custom cursor functionality
|
|
mouseCursor();
|
|
}, []);
|
|
return (
|
|
<>
|
|
<div className="mouse-cursor cursor-outer"></div>
|
|
<div className="mouse-cursor cursor-inner"></div>
|
|
</>
|
|
);
|
|
}
|