Hello guys in this tutorial, we are going to learn how create Animated Eyes Follow Mouse Cursor using JavaScript.
First we need to create two files index.html and style.css then we need to do code for it.
Animated Eyes 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 http-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>
Animated Eyes 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;
}
JavaScript Mouse move video output:
JavaScript Mouse move Codepen output:
For more interesting content
Top comments (0)