相对于背景当前位置的视差

Question

I'm attempting to create a parallax effect (which works great) however there is a small problem. Instead of the parallax being relative from the element's current position, it jumps to 0. How would I be able to have the parallax affect it's position relative to it's current position?

Here is my javascript:

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var alreadyY = $("#caveConfron").css("backgroundPositionY");

    $("#caveConfron").css({"backgroundPosition":-(x/85)+"% 0%"});
});

And my CSS for the element:

#caveConfron{
    width:242px;
    height:344px;
    border:5px solid black;
    background:url('../img/caveConfrontBg.jpg') no-repeat center top;
    position:relative;
}

Here is an example of what happens: http://jsfiddle.net/gNCjS/

Answer 1

After much experimentation, I figured out the problem.

First and foremost, when the mouse hits the center of the div, the value of the mouse position of x should be "0". So this is what I did without tweaking the CSS:

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var reduce = $(this).width()/2;

    $("#caveConfron").css({"backgroundPosition":(((-x+reduce)/55)+50)+"% 0%"});
});

The variable reduce gets half of the width of the div. Then, I get the negative of the variable x while adding it to the the value of reduce so if the mouse position of x surpasses half of the div, it will go positive, so the middle will perpetually be "0." I then divide 55 so it wont jump sporadically when moving around on the x axis, it will be a small change (feel free to tweak this value if you want the jump to be much more substantial; for my purposes it was great). On top of that, I add 50, because in my original CSS the background's position is centered which coincidentally puts the value (in number terms) at 50%.

Hope my explanation was good!