View project

Cursor Change on Hover

with A dream to Create Amazing Design- Based Solutions |
Hover me! 
				
					Add html to your page which have class cursor and cursor-small, cursor big
Add styles to your page
Add the following code to your page

				
			
				
					<div class="cursor cursor-small"></div> 

<div class="cursor cursor-big">
<!-- 	Add either one of the below -->
<!-- 	<img decoding="async" width="30" height="30" src="" alt=""> -->
 <p>
		View project
	</p>   
</div>
				
			
				
					<style>
    


	html {
    overflow-x: hidden;
}
	
	
.cursor {
  position: fixed;
  pointer-events: none;
  opacity: 0;
}

.cursor-small {
  top: 0px;
  left: 0px;
  z-index: 1;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: red;
}

	.cursor-big {
	top: 0px;
  left: 0px;
	height: 100px;
	width: 100px;
	align-items: center;
  background-color: red;
  border-radius: 50%;
  color: white;
  display: flex;
  font-size: 15px;
  justify-content: center;
  padding: 10px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: color 0.5s ease;
  z-index:9999;
	}

	p{
		margin-top: 10px;
	}

   /*	disable custom cursor on tablet & mobile */
   @media only screen and (max-width: 768px) {
    .cursor-small{
        display:none;
     }
    
   }


</style>
				
			
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>



<script>

const cursorSmall = document.querySelector(".cursor-small");
const cursorBig = document.querySelector(".cursor-big");

let scale = 1;
	
	
function mousemoveHandler(e) {
  const target = e.target;
  const tl = gsap.timeline({
    defaults: {
      x: e.clientX,
      y: e.clientY,
      ease: "power2.out"
    }
  });

  if (target.closest(".your-class")) {
    tl.to(cursorSmall, { opacity: 0 })
      .to(cursorBig, { opacity: 1 }, "-=0.5");
  } else {
    if (target.classList.contains("your-class")) {
      scale = 4;
    } else {
      scale = 1;
    }

    tl.to(cursorSmall, { opacity: 1, scale: scale })
      .to(cursorBig, { opacity: 0 }, "-=0.5");
  }

	
function mouseleaveHandler() {
  gsap.to(cursorSmall, { opacity: 0 });
}}

document.addEventListener("mousemove", mousemoveHandler);
document.addEventListener("mouseleave", mouseleaveHandler);

</script>