OUTPUT of the given code
Use the following code:
HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Cursor</title>
// Use this if you use seprate css
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="cursor"></div>
<h1 class="heading">Custom Cursor</h1>
</div>
// Use this if you use seprate JS file
<script src="script.js"></script>
</body>
</html>
CSS code.
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
}
.main{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 700px;
width: 100%;
background-color: black;
}
.cursor{
position: absolute;
width: 24px;
height: 24px;
background-color: white;
border-radius: 100%;
mix-blend-mode: difference;
}
.heading{
font-size: 96px;
color: white;
font-weight: bold;
}
JavaScript code.
let main = document.querySelector(".main");
let cursor = document.querySelector(".cursor");
main.addEventListener("mousemove", (axis) => {
// You can use x instead of clientX
cursor.style.left = `${axis.clientX}px`;
// You can use y instead of clientY
cursor.style.top = `${axis.clientY}px`;
})
Â