Move the background image on mouse over (Single Parallax)

Question

I would like to make the background image move slightly on the X and Y axis when the mouse is in the \"landing-content\" DIV, it should move with the movement of the mouse.

Answer 1

You could use the mousemove event, as shown in this fiddle. http://jsfiddle.net/X7UwG/

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});

It's just a quick example though, you'll have to play with the numbers yourself. ;)

Answer 2

You could achieve it like this

$(document).ready(function(){
  $('#landing-content').mousemove(function(e){
    var x = -(e.pageX + this.offsetLeft) / 20;
    var y = -(e.pageY + this.offsetTop) / 20;
    $(this).css('background-position', x + 'px ' + y + 'px');
  });    
});

http://jsfiddle.net/uMk7m/2/

Answer 3

Check this fiddle. I think you will find what you want. http://jsfiddle.net/Aveendra/uXPkE/

$('#landing-content').mousemove(function(e){
    $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px');
});