<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minion</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img class="minion" src="https://cdn.tutsplus.com/psd/uploads/legacy/0613_Minion/43.jpg">
<div class="vision">
<div class="eye">
<div class="ball"></div>
</div>
</div>
<script>
var ball= document.getElementsByClassName("ball");
document.onmousemove = function(){
var x = event.clientX + 100 / window.innerWidth + "%";
var y = event.clientY + 100 / window.innerHeight + "%";
for (var i=0; i<2; i++){
ball[i].style.left = x;
ball[i].style.top = y;
}
}
</script>
</body>
</html>
.vision{
position: absolute;
top:50%;
left:50%;
transform:translate(-35%,-320%);
width:100%;
}
.eye{
width:190px;
height:190px;
background: white;
border-radius:50%;
position: relative;
display:inline-block;
margin:0 60px;
border:20px solid #8395a7;
overflow:hidden;
}
.ball{
position:absolute;
width:30px;
height: 30px;
background-color:#222f3e;
border:8px solid #576574;
border-radius:50%;
top:18%;
left:20%;
transform: translate(-50%,-50%);
}
Can someone please explain why the eye is not following the mouse.
p.s: its not responsive yet Please check on mobile device screen size