0

I want to make a background image (larger than the page) positioning when the mouse move over it and I did, but I would like that when moving the mouse position relative to image position doesn't change

i.e. in the example below if mouse is over a letter, when moving the background image the mouse remain on the same letter

but the percentage is not correct

var newvalueX = e.pageX / $(window).width() *100;
var newvalueY = e.pageY / $(window).height() *100;

working example here: https://codepen.io/anon/pen/pazzZG/

any idea? Thanks!

taloweb
  • 1
  • 3
  • Your codepen example does not display anything for me. – Jules Dupont Jan 27 '18 at 15:32
  • Possible duplicate of [Move an image according to the mouse cordinates using jquery](https://stackoverflow.com/questions/6733570/move-an-image-according-to-the-mouse-cordinates-using-jquery) – Zac B Jan 27 '18 at 15:33
  • now it's working well (in FF and Chrome) for me, are you sure? I have some problems only in Edge... – taloweb Jan 27 '18 at 15:52

1 Answers1

0

Don't use percentages at all. Keep track of the mouse's coordinates in the previous mousemove event, calculate the difference between those coordinates and the coordinates of the current event, and add that difference to the background's position.

AuxTaco
  • 4,883
  • 1
  • 12
  • 27