Hello Guys! In this blog we have created custom cursor effect using html, css and javascript. You must check this project if you are beginner and learning web development.
Before we start, here are some JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cursor effect using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<div class="cursor"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cursor effect using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<div class="cursor"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cursor effect using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<div class="cursor"></div>
</body>
</html>
CSS Code
Create a file style.css and paste the code below.
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: poppins;
}
.cursor {
z-index: 999;
position: fixed;
background: #2696E8;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 20px #2696E8,
0 0 60px #2696E8,
0 0 100px #2696E8;
animation: colors 5s infinite;
transform: translate(-50%, -50%);
display: none;
}
@keyframes colors {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.cursor:before {
content: '';
position: absolute;
background: #2696E8;
width: 50px;
height: 50px;
opacity: 0.2;
transform: translate(-30%, -30%);
border-radius: 50%;
}
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: poppins;
}
.cursor {
z-index: 999;
position: fixed;
background: #2696E8;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 20px #2696E8,
0 0 60px #2696E8,
0 0 100px #2696E8;
animation: colors 5s infinite;
transform: translate(-50%, -50%);
display: none;
}
@keyframes colors {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.cursor:before {
content: '';
position: absolute;
background: #2696E8;
width: 50px;
height: 50px;
opacity: 0.2;
transform: translate(-30%, -30%);
border-radius: 50%;
}
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: poppins;
}
.cursor {
z-index: 999;
position: fixed;
background: #2696E8;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 20px #2696E8,
0 0 60px #2696E8,
0 0 100px #2696E8;
animation: colors 5s infinite;
transform: translate(-50%, -50%);
display: none;
}
@keyframes colors {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.cursor:before {
content: '';
position: absolute;
background: #2696E8;
width: 50px;
height: 50px;
opacity: 0.2;
transform: translate(-30%, -30%);
border-radius: 50%;
}
Output Till Now
JavaScript Code
Create a file
script.js and paste the code below.const cursor = document.querySelector(".cursor");
var timeout;
//follow cursor on mousemove
document.addEventListener("mousemove", (e) => {
let x = e.pageX;
let y = e.pageY;
cursor.style.top = y + "px";
cursor.style.left = x + "px";
cursor.style.display = "block";
//cursor effects when mouse stopped
function mouseStopped() {
cursor.style.display = "none";
}
clearTimeout(timeout);
timeout = setTimeout(mouseStopped, 5000);
});
//cursor effects when mouseout
document.addEventListener("mouseout", () => {
cursor.style.display = "none";
});
const cursor = document.querySelector(".cursor");
var timeout;
//follow cursor on mousemove
document.addEventListener("mousemove", (e) => {
let x = e.pageX;
let y = e.pageY;
cursor.style.top = y + "px";
cursor.style.left = x + "px";
cursor.style.display = "block";
//cursor effects when mouse stopped
function mouseStopped() {
cursor.style.display = "none";
}
clearTimeout(timeout);
timeout = setTimeout(mouseStopped, 5000);
});
//cursor effects when mouseout
document.addEventListener("mouseout", () => {
cursor.style.display = "none";
});
const cursor = document.querySelector(".cursor");
var timeout;
//follow cursor on mousemove
document.addEventListener("mousemove", (e) => {
let x = e.pageX;
let y = e.pageY;
cursor.style.top = y + "px";
cursor.style.left = x + "px";
cursor.style.display = "block";
//cursor effects when mouse stopped
function mouseStopped() {
cursor.style.display = "none";
}
clearTimeout(timeout);
timeout = setTimeout(mouseStopped, 5000);
});
//cursor effects when mouseout
document.addEventListener("mouseout", () => {
cursor.style.display = "none";
});
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
