Keep parallax from going backward

Question

Hi all I am working on this snippet http://jsfiddle.net/arobichaux/Qbrv9/29/ and I basically am having a few problems.

Firsly, I want it to not be able to go past the beginning of the photo (no scrolling to past left:0px;) and also I am wondering what is a good way to make sure that the length of the mouse movement in the live area will take them ALL THE WAY to the end of the image? The image is 5464px wide.

Any suggestions? Thanks!

var strength1 = 1000;
var strength2 = 2000;
var strength3 = 5000;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 15);
    var pageY = e.pageY - ($(window).height() / 1);
    var newvalueX = 2* pageX * -1;
    var newvalueY = 1* pageY * -1;
  $('#background').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(1  / $(window).height() * pageY * -1)+"px");
    $('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(1 / $(window).height() * pageY * -1)+"px");
});

Answer 1

jsFiddle Demo

First off, very nice question for a first time user. The fiddle is well presented, and I think that parallax is becoming more popular and relevant by the hour.

There are two issues that I will address, and in my opinion they are minor (your code works rather well - good job).

no scrolling to past left:0px;

This is easy, just change the check for pageX after it is calculated, and if it is less than 0, set it to 0. Pretty straight forward collision detection.

var pageX = e.pageX - ($(window).width() / 15);
if( pageX < 0 ) pageX = 0;

take them ALL THE WAY to the end of the image

This issue arises from the fact that you set the width of the area to less than the image width. Notably, your fiddle lists strength3 = 5000 whereas it should be

var strength3 = 5464;