Make an image follow mouse pointer

Question

I need a rocket to follow the movements of the mouse pointer on my website. This means it should rotate to face the direction of motion, and if possible, accelerate depending on the distance it has to cover. Is this even possible ? jquery perhaps ?

Answer 1

by using jquery to register .mousemove to document to change the image .css left and top to event.pageX and event.pageY.

example as below http://jsfiddle.net/BfLAh/1/

$(document).mousemove(function(e) {   $("#follow").css({     left: e.pageX,     top: e.pageY   }); });

#follow {   position: absolute;   text-align: center; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="follow"><img src="https://placekitten.com/96/140" /><br>Kitteh</br> </div>

updated to follow slowly

http://jsfiddle.net/BfLAh/3/

for the orientation , you need to get the current css left and css top and compare with event.pageX and event.pageY , then set the image orientation with

-webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);  

for the speed , you can set the jquery .animation duration to certain amount.