Eye Follow Mouse Cursor Animation | Mouse Cursor Effects Javascript

Eye Follow Mouse Cursor Animation | Mouse Cursor Effects Javascript

Eye Follow Mouse Cursor Animation | Mouse Cursor Effects Javascript



Welcome🎉 to Code With Random blog. In this blog, we learn how we create Eye Follow Mouse Cursor Animation. We use HTML, Css, and javascript for this Eye Follow Mouse Cursor Animation. I hope you enjoy our blog so let's start with a basic HTML structure for the Eye Follow Mouse Cursor Animation.

HTML Code

 <div class="container">  
  <div class="eyeBall">  
   <div class="iris"></div>  
  </div>  
  <div class="eyeLid"></div>  
  <div class="lid"></div>  
 </div>  
There is all the HTML code for the Eye Follow Mouse Cursor Animation. Now, you can see an output with Eye Follow Mouse Cursor Animation then we write javascript for Eye Follow Mouse Cursor Animation.
output
Eye Follow Mouse Cursor Animation | Mouse Cursor Effects Javascript
Simple Blank Output with Blank Html Tag

CSS code

 body {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
  background-color: #dab785;  
 }  
 .container {  
  position: relative;  
  cursor: pointer;  
 }  
 .iris {  
  position: absolute;  
  width: 70px;  
  height: 70px;  
  border: 5px solid #333;  
  background-color: #0077b6;  
  border-radius:50%;  
  left:40px;   
  top:30px;  
 }  
 .iris:before {  
  content:"";  
  position: absolute;  
  background-color: #333;  
  border-radius:50%;  
  width:40px;  
  height: 40px;  
  top:22%;  
  left:22%;  
 }  
 .iris:after {  
  content:"";  
  position: absolute;  
  background-color: rgba(255,255,255,0.4);  
  border-radius: 50%;  
  width:15px;  
  height:15px;  
  top:35%;  
  left:65%;  
  box-shadow: -35px 20px rgba(255,255,255,0.4);  
 }  
 .eyeBall {  
  position: relative;  
  width: 150px;  
  height: 150px;  
  background-color: white;  
  border: 5px solid #333;  
  border-radius:100% 0;  
  box-shadow: inset 5px 5px 5px rgba(0,0,0,0.3);  
  transform: rotate(45deg);  
  top:-10px;  
  z-index:1;  
  overflow: hidden;  
 }  
 .eyeLid {  
  position: absolute;  
  border-top: 5px solid #333;  
  border-left: 5px solid #333;  
  border-radius:100% 0;  
  width: 150px;  
  height: 150px;  
  top:-30px;  
  left:3px;  
  transform: rotate(45deg);  
  transition: .2s;  
  z-index:10;  
 }  
 .container:hover .eyeLid {  
  transform: rotate(-45deg) rotateX(160deg);  
 }  
 .container:hover .lid {  
  transform: translateY(90px);  
 }  
 .lid {  
  position: absolute;  
  z-index:9;  
  background-color: #dab785;  
  width: 295px;  
  height: 270px;  
  border-radius:50%;  
  top:-248px;  
  left:-68px;  
  transition: .2s;  
 }  
Css Updated output

Eye Follow Mouse Cursor Animation | Mouse Cursor Effects Javascript

Javascript code

  const eye = document.querySelector('.iris');  
  window.addEventListener('mousemove', (event) => {  
  const x = -(window.innerWidth / 2 - event.pageX) / 35;  
  const y = -(window.innerHeight / 2 - event.pageY) / 35;  
  eye.style.transform = `rotate(-45deg) translateY(${y}px) translateX(${x}px)`;       
     });   
Final output
Eye Follow Mouse Cursor Animation | Mouse Cursor Effects Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Eye Follow Mouse Cursor Animation. 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 Eye Follow Mouse Cursor Animation using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post