My goal is this animation here:
The lands with the mouse ...
What have I 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>
Result?
What's missing?
As 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 you want, you can also add a condition to check the limit on the right side, but you may not get the same effect on this side since your image is too large, you can add some numbers in e.pageX to "reduce" the image size, but this calculation depends on your specification for the animation.
EDITED
In the state defined above, the image moves the same amount as the mouse, to change that you must change the amount of movement of the mouse, I mean, do the calculation as if the mouse had not moved as much as it actually did moved, and for that I was able to mount this:
$(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 gets much slower, you can vary that number.