animation in image

Question

My goal is this excitement here:

http://www.pullabulla.com.br/

The terrain accompanying the mouse...

What I’ve done so far?

css

  #box, body {
      overflow: hidden;
  }

  #box {
    position: relative;
  }

  #img{
    position:absolute;
 }

Js

$(document).ready(function() {

     $('body').mousemove(function(e){
        $("#img").css({left:e.pageX-120});
     });

});

html

<div id="box" style="width: 1000px; height: 180px;">
  <img id="img" src="bg-clouds.png"/>
</div>

Upshot?

http://www.dinamicaimoveis.com.br/novo/an/cn.php

What is missing?

Answer 1

Like I said, you need to add a test, I did it here:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    if(e.pageX - hw < 0)
        $("#img").css({left:e.pageX - hw});
 });

});

and I think it’s now working as Oce wants, Oce can also add a condition to check the limit on the right side, only you may not get the same effect on this side since your image is too big, you can add some numbers on e.pageX to "reduce" the size of the image, but this calculation depends on its specification for the animation.

EDITED

In the state defined above, the image moves the same amount as the mouse, to change this you must change the amount of movement of the mouse, I mean, make the calculation as if the mouse had not moved as much as it actually moved, and for that I was able to assemble it:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    var movement = (e.pageX - hw)/8;
    if(movement < 0)
        $("#img").css({left:movement});
 });

});

by dividing the amount of movement by the number 8 the animation is much slower, you can vary that number.