Hey friends,
Do check out the tutorial on my YouTube channel and do subscribe to support me!
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Custom Dot Cursor using JavaScript | CodingPorium</title>
</head>
<style>
/*Import Poppins Font*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
padding:0;
margin:0;
box-sizing:border-box;
cursor:none;
}
::selection{
background:gold;
color:black;
}
body{
overflow-x:hidden;
font-family: poppins;
}
section{
height:100vh;
background-color: royalblue;
width:100%;
display:flex;
align-items:center;
justify-content:center;
color:white;
}
.cursor{
z-index:100;
position:absolute;
top:0;
left:0;
height:30px;
width:30px;
border-radius:50px;
transform:translate(-50%, -50%);
pointer-events: none;
}
.cursor::after,
.cursor::before{
content:"";
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background-color: white;
height:10px;
width:10px;
border-radius:50px;
}
.cursor::before{
background-color: rgb(255,255,255);
}
.cursor.click::before{
animation:click 1s ease forwards;
background-color: white;
}
@keyframes click{
0&{
opacity:1;
transform:translate(-50%, -50%) scale(1);
}
100%{
opacity:0;
transform:translate(-50%,-50%) scale(7);
}
}
</style>
<body>
<section class="container">
<h1>Custom Cursor Zone!</h1>
</section>
<section></section>
<div class="cursor"></div>
</body>
<script>
const cursor = document.querySelector(".cursor");
window.addEventListener("mousemove",(e) => {
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
cursor.setAttribute("data-fromTop", cursor.offsetTop- scrollY);
console.log(e)
});
window.addEventListener("scroll", () => {
const fromTop = cursor.getAttribute("data-fromTop");
cursor.style.top =scrollY+ parseInt(fromTop) + "px";
console.log(scrollY);
});
window.addEventListener("click", () => {
if(cursor.classList.contains("click")){
cursor.classList.remove("click");
void cursor.offsetWidth; //trigger dom reflow
cursor.classList.add("click");
}else{
cursor.classList.add("click")
}
});
</script>
</html>
Post a Comment