I came across Ian Lunn's Parallax tutorial and found it really interesting. The tutorial can be accessed at . My goal is to enhance the effect by not only changing the y-position of the background but also adding horizontal movement based on scroll input. This would make certain objects move in both vertical and horizontal directions simultaneously.
To better explain what I have in mind, check out the example at . Specifically, look at the 3rd scene where the car enters - that's the kind of movement I aim to achieve.
Below is the original code snippet from Ian Lunn:
//function that is called for every pixel the user scrolls. Determines the position of the background
/*arguments:
x = horizontal position of background
y = vertical position of the background
windowHeight = height of the viewport
pos = position of the scrollbar
adjuster = adjust the position of the background
inertia = how fast the background moves in relation to scrolling
backgroundPosition-y = original background position vertical
*/
function newPos(x, windowHeight, pos, adjuster, inertia){
return x + "% " + (-((windowHeight + pos) - adjuster) * inertia) + "px";
}
//function to be called whenever the window is scrolled or resized
function Move(){
var pos = $window.scrollTop(); //position of the scrollbar
//if the first section is in view...
if($firstBG.hasClass("inview")){
//call the newPos function and change the background position
$firstBG.css({'backgroundPosition': newPos(20, windowHeight, pos, 300, 0.1)});
sun_1.css({'backgroundPosition': newPos(10, windowHeight, pos, 4000, .1)});
deer.css({'backgroundPosition': newPos(40, windowHeight, pos, 500, .1)});
}
Although I'm aware this may not be the best approach, here's what I've attempted:
sun_1.css({'backgroundPosition': newPos(10, windowHeight, pos, 4000, .1)}, {'background-position-x': '0% ' + parseInt(-xx/ 10) + 'px'});
I'm wondering if there's a way to integrate this into the existing "newPos" function?