在滾動上更改背景位置-x

我正在使用Ian Lunn的視差教程http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/。我想在此基礎上不僅改變背景的y位置，而且還改變滾動的x位置。這基本上會增加水平移動以及垂直移動，以便一些物體在兩個方向上移動。在滾動上更改背景位置-x

有關我想要做的一個示例http://www.nikebetterworld.com/product。汽車進入的第三個場景是我試圖實現的運動。

他原來的代碼是：

//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)}); 
    }

我敢肯定，這是非常非常錯誤的事，但這裏是我試過。

sun_1.css({'backgroundPosition': newPos(10, windowHeight, pos, 4000, .1)}, {'background-position-x': '0% ' + parseInt(-xx/ 10) + 'px'});

有沒有辦法將其添加到「newPos」功能？

來源

2012-04-23 AiJahya

其實，我想出了一些有效的東西。

sun_1.css({'backgroundPosition': newPos((3+pos/50), windowHeight, pos, 4000, .2)});

也許不是最好的解決方案，但它似乎工作正常。第一個數字定義了起始位置（在這種情況下爲3％），第二個數字抓取窗口相對於滾動的位置，第三個數字確定移動的速度。

要改變沿x方向的移動，請將「50」改爲負數。

來源

2012-04-24 13:17:02 AiJahya

在滾動上更改背景位置-x

回答

相關問題