how to get a custom cursor | custom cursor maker Html Css javascript

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.

how to get a custom cursor | custom cursor maker Html Css javascript

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 next code slide we cover our whole javascript.

how to get a custom cursor | custom cursor maker Html Css 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. Hope you like this cursor, you can see output video and project screenshots. See our other blogs and gain knowledge in front end development. Thank you 🙏💕

how to get a custom cursor | custom cursor maker Html Css javascript



In this post, we learn how to create  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 

Post a Comment

Previous Post Next Post