Looking to add an animation effect to my website. I want the navbar to follow the cursor within a limited space when hovered over. Check out this example for reference: . Here's the code I have so far, but it's not quite achieving the desired result. Can anyone offer assistance?
const cursor = document.querySelector('#cursor');
document.addEventListener("mousemove", function(e) {
cursor.setAttribute("style", "top: " + (e.clientY - 10) + "px; left: " + (e.clientX - 10) + "px;")
})
document.getElementById("navbarimg").addEventListener("mouseover",function(e) {
cursor.classList.toggle("hover")
})
document.getElementById("navbarimg").addEventListener("mouseout",function(e) {
cursor.classList.toggle("hover")
})
document.querySelector('body').addEventListener('mousemove',follow);
function follow(){
var nav = document.querySelectorAll('.nav');
nav.forEach(function(nav){
let x = (nav.getBoundingClientRect().left)+(nav.clientWidth / 2);
let y = (nav.getBoundingClientRect().top)+(nav.clientHeight / 2);
let radian = Math.atan2(event.pageX-x,event.pageY-y);
let rot =(radian*(180/Math.PI)*-1)+270;
nav.style.transform="rotate("+ rot +"deg)";
})
}body{margin:0;height:100vh;background:rgb(27,27,27);}
#cursor{width:30px;height:30px;border:2px solid gray;border-radius:50%;position:fixed;transition-duration: 100ms;transition-timing-function: ease-out;}
#navbarimg:before{position:absolute;top:50%;left:50%;transform:tranlate(-50%,-50%);}
#cursor.hover{width: 100px;height:100px;opacity:0.1;background-color:gray;}
#cursor.hover1{width: 300px;height:300px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cursor</title>
</head>
<body>
<div id="cursor"></div>
<div class="nav">
<a href="../"><img id="navbarimg" src="navbar.svg" alt="navbar"></a> </div>
</body>
</html>