1

我正在使用 Ian Lunn 的 Parallax 教程http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/。我想以此为基础，不仅可以更改背景的 y 位置，还可以更改滚动时的 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”函数中？

4

1 回答 1

0

实际上，我想出了一些可行的方法。

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

也许不是最好的解决方案，但它似乎工作正常。第一个数字定义起始位置（在本例中为 3%），第二个数字获取窗口相对于滚动的位置，第三个数字确定移动速度。

要更改沿 x 的移动方向，请将“50”更改为负数。

于 2012-04-24T13:17:02.950 回答