Question

I want to make something similar to the CSS/JQUERY effect that you can see in the following error link:

http://new.livestream.com/error

What I want to know is how I can make the background image move according to the mouse position and using JQUERY. I have seen some code that could help me but since I’m not very keen on JQUERY I ask for some help.
I post the code:

$(document).ready(function(){
  $('#home a')
   // On mouse over, move the background on hover
   .mouseover(function(){
     $(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
   })
   // On mouse out, move the background back
   .mouseout(function(){
      $(this).stop().animate({backgroundPosition: "0 0"}, 500);
   })
 });

I guess that I must change the values static “0 -54px” values to a dynamic values according the current mouse position right?

Best regards

Answer 1

That’s right, you’ll probably want to listen for the mouseMove() event though

See this link for the jQuery documentation on mouseMove

$("#target").mousemove(function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;
    // you can now use mouseX and mouseY to calculate and set the background position or offset
});