Hello guys in this tutorial, we are going to learn how create Animated Eyes Follow Mouse Cursor using JavaScript (JavaScript Mouse move).
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Face</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="face">
<div class="eye-outer">
<div class="left-eye">
<svg viewBox="0 0 21 21">
<circle class="eye eye-left" cx="10.5" cy="10.5" r="2.25"></circle>
<path class="top" d="M2 10.5C2 10.5 6.43686 5.5 10.5 5.5C14.5631 5.5 19 10.5 19 10.5"></path>
<path class="bottom" d="M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5"></path>
</svg>
</div>
<div class="right-eye">
<svg viewBox="0 0 21 21">
<circle class="eye eye-right" cx="10.5" cy="10.5" r="2.25"></circle>
<path class="top" d="M2 10.5C2 10.5 6.43686 5.5 10.5 5.5C14.5631 5.5 19 10.5 19 10.5"></path>
<path class="bottom" d="M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5"></path>
</svg>
</div>
</div>
<div class="mouth-outer">
<svg viewBox="0 0 21 21">
<path class="top" d="M2 10.5C2 10.5 6.43686 5.5 10.5 5.5C14.5631 5.5 19 10.5 19 10.5"></path>
<path class="bottom" d="M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5"></path>
</svg>
</div>
</div>
<script type="text/javascript">
const eye1 = document.querySelector('.eye-left');
const eye2 = document.querySelector('.eye-right')
window.addEventListener('mousemove', (evt) => {
const x = -(window.innerWidth / 2 - evt.pageX) / 160;
const y = -(window.innerHeight / 2 - evt.pageY) / 160;
eye1.style.transform = `translateY(${y}px) translateX(${x}px)`;
eye2.style.transform = `translateY(${y}px) translateX(${x}px)`;
});
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f1f2f3;
}
svg {
display: block;
width: 80px;
height: 80px;
pointer-events: none;
transform-style: preserve-3d;
}
circle.eye {
fill: #a1a1b6;
}
path.top, path.bottom {
fill: transparent;
stroke: #a1a1b6;
stroke-width: 1.3px;
stroke-linecap: round;
}
.eye-outer {
display: flex;
align-items: flex-start;
justify-content: center;
margin-top: 15px;
}
.face {
border: 8px solid #a1a1b6;
border-radius: 50%;
width: 220px;
height: 220px;
}
.mouth-outer {
display: flex;
align-items: center;
justify-content: center;
}
.mouth-outer svg {
width: 100px;
height: 100px;
}
.mouth-outer path.top, .mouth-outer path.bottom {
stroke-width: 2px;
}
Supebbbb