Javascript - follow the mouse

Javascript - follow the mouse
0

#1
<!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