Question

So, what’s the problem? I’ve got a div with “position:absolute” property. Now – I was wondering – can I move this div with jQuery (or simple javascript), each time when the mouse moves? And it’s about a constant and increasing move, only on the X axis. So – imagine a left and right side of the browser window. When – for example – mouse cursor is on the left half – this div slowly moves right all the time; and also when cursor gets closer and closer to the left edge – speed of a div is increased a bit. I’m trying to learn WebGL on Three.js engine. Let me show you an example:

look here – http://hadyk.pl/webgl/ (probably doesn’t work in IE)

Look at the way stars are moving, when you move the cursor – I want to achieve the same with the background div.

Thanks

EDIT: Ok, I got it working. Look at upgraded link. Code:

Script:

$('#background').css( {backgroundPosition: "0px bottom"} )

function moveRight() { 
                $('#background').stop().animate({right:  "1500px"},
                {duration:80000});
}
function moveLeft() { 
                $('#background').stop().animate({right:  "-1500px"},
                {duration:80000});
}
function onStop() {
                $('#background').stop();
}

HTML:

<div id="background"></div>
<div id="left" onMouseOver="moveLeft()" onMouseOut="onStop()"></div>
<div id="right" onMouseOver="moveRight()" onMouseOut="onStop()"></div>

CSS:

#background {
            background: #000 url(images/moon.png) no-repeat;
            position:absolute;
            bottom:0;
            right:0;
            width:411px;
            height:404px;
            z-index:-2;
}
#left {
            position:absolute;
            left:0;
            bottom:0;
            width:30%;
            height:100%;
            z-index:99
}
#right {
            position:absolute;
            right:0;
            bottom:0;
            width:30%;
            height:100%;
            z-index:99
}

Answer 1

I get an error here:

function moveBackground() {
    $('#background').css({'right':(parseInt($('#background').css('right')) + (e.pageX*0.001))+'px'});
window.setTimeout(moveBackground(), 50);
}

You forgot the e in the function parameter:

function moveBackground(e) {
    $('#background').css({'right':(parseInt($('#background').css('right')) + (e.pageX*0.001))+'px'});
window.setTimeout(moveBackground(), 50);
}