How To Get A Custom Cursor | Custom Cursor Maker Html Css Javascript

How To Get A Custom Cursor | Custom Cursor Maker Html Css Javascript

Welcome to codewithrandom blog in this blog we learn that how we how to get a custom cursor  . We use HTML & css and javascript for this custom cursor maker .  Hope you enjoy our blog so let’s start with a basic HTML structure for custom cursor maker .

HTML code for custom cursor 

 <body>  
  <section class="container">  
   <h1>Click on Screen,Random!</h1>  
  </section>  
  <section></section>  
  <div class="cursor"></div>  
 </body>  

There is all HTML code for custom cursor  . Now you can see output without css then we write css for our custom cursor.

 

 

CSS for custom cursor 

 

 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 * {  
  cursor: none;  
 }  
 body {  
  overflow-x: hidden;  
 }  
 section {  
  min-height: 100vh;  
  background-color: rgb(41, 42, 46);  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  color: white;  
 }  
 .cursor {  
  z-index: 100;  
  position: absolute;  
  top: 0;  
  left: 0;  
  /* border: 2px solid white; */  
  /* background-color: rgba(255, 255, 255, 0.356); */  
  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: rgb(255, 255, 255);  
 }  
 @keyframes click {  
  0% {  
   opacity: 1;  
   transform: translate(-50%, -50%) scale(1);  
  }  
  100% {  
   opacity: 0;  
   transform: translate(-50%, -50%) scale(7);  
  }  
 }  

Now we complete our css section, Here is our updated output with css. in the next code slide we cover our whole javascript.

 

Javascript for custom cursor

 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 a DOM reflow  
   cursor.classList.add("click");  
  } else {  
   cursor.classList.add("click");  
  }  
 });  

This is all our small JavaScript. I hope you like this cursor, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

 

In this post, we learn how to create a custom cursor with simple coding of HTML & css, and javascript . If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

written by – codewithrandom/Anki

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Share on:

Leave a Comment