im trying to find a way to make an image move or follow the mouse cursor. Basically i have a radial pie menu and i'd like the image thats in the middle of it, to spin and rotate as the mouse mouves.
Any ideias how i can do that?
Appreciate the help!!!
first what you can do is make the image or the element that you want to follow the cursor to absolute position
#image {
position:absolute;
}
then, you can set left and top poosition of the image that equal to cursor position with mousemove event example with jquery
$(document).mousemove(function(e){
$("#image").css({left:e.pageX, top:e.pageY});
});
or you can do it just with vanilla JavaScript
document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let image = document.getElementById('image');
let left = e.offsetX;
let top = e.offsetY;
image.style.left = left + 'px';
image.style.top = top + 'px';
});
Hopefully my answer can help you.