how to make background image move mmousemove jquery 1

how to make background image move mmousemove jquery

how to make background image move mmousemove with jquery:
$('background-section').mousemove(function (e) {
  // values: e.clientX, e.clientY, e.pageX, e.pageY
  // console.log(moveX = (e.pageX));
  let moveX = (e.pageX * -1 / 20);
  let moveY = (e.pageY * -1 / 15);
  $(this).css('background-position', moveX + 'px ' + moveY + 'px');
});

Here is what the above code is Doing:
1. We’re using the jQuery mousemove() method to detect when the mouse is moved.
2. We’re using the jQuery css() method to change the background-position property of the background image.
3. We’re using the e.pageX and e.pageY properties to get the position of the mouse pointer.
4. We’re using the * -1 operator to invert the position of the background image.
5. We’re using the / 20 and / 15 operators to slow down the movement of the background image.

Similar Posts