Smoothing movement effect that follows mouse position

Question

I want to create a very simple effect moving a background image when the mouse moves. For that Im recording the mouse position and using it to modify a css property:

$('#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');
}); 

http://jsfiddle.net/X7UwG/580/

I want to make the background movements less aggressive, at first i though well, lets just increase the divider factor in the equation in order to make larger mouse positions lower:

http://jsfiddle.net/X7UwG/581/

The main problem with this approach is that the background is indeed moving slower BUT also very choppy (move the mouse slowly). Since we are now dividing by 100 instead of 6, the non decimal part of the result change after several pixels of movement (open console and see the result). Since background position only takes non decimal values as correct, the movement is not fluid.

I guess I have two ways of solving this, smoothing the transitions between the movements or have a different equation that transforms mouse position into background diferential position, but i cant figure out how to fix it.

The second part of the problem is to prevent the background movement to surpass the background size:

Answer 1

Would something like this work for you?

I simply reduced the divisor by half and increased the size of the background image to account for the movement and applied margin:0 on the body to hide the whitespace that was present in the fiddle

http://jsfiddle.net/X7UwG/582/

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



body {
  margin:0px;
}
#landing-content {
  overflow: hidden;
  background-image: url(http://i.imgur.com/F2FPRMd.jpg);
  width: 100%;
  background-size: 115%;
  background-repeat: no-repeat;
  max-height: 500px;
  border-bottom: solid;
  border-bottom-color: #628027;
  border-bottom-width: 5px;
  padding:0px;
}