Hi,
I'm building a parralax website.
When scrolling vertically, the objects change position vertically too.
But I want one image to change horizontally when scrolling vertically.
So i probably need to change some code but I don't know where to start?
I tried this but than it goed diagonally not vertical :s
taxi.css({'backgroundPosition': newPosHorizontal(50, windowHeight, pos, 2600, 0.6)});
This is the code:
//if the second section is in view...
if($secondBG.hasClass("inview")){
//call the newPos function and change the second background position
taxi.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.6)});
function RepositionNav(){
var windowHeight = $window.height(); //get the height of the window
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
$('#nav').css({"top": newtop}); //set the new top position of the navigation list
}
//function that is called for every pixel the user scrolls. Determines the position of the background
/*arguments:
x = horizontal position of 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
*/
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