1

Ian Lunn の視差チュートリアルhttp://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/を使用しています。これに基づいて、背景の y 位置だけでなく、スクロール時の x 位置も変更したいと思います。これにより、基本的に水平方向の動きと垂直方向の動きが追加され、一部のオブジェクトが両方向に移動するようになります。

私がやりたいことの例についてはhttp://www.nikeBetterworld.com/product。車が入ってくる3つ目のシーンは、私が実現しようとしている動きです。

彼の元のコードは次のとおりです。

//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％）を定義し、2番目の数字はスクロールに対するウィンドウの位置を取得し、3番目の数字は移動速度を決定します。

xに沿った移動方向を変更するには、「50」を負の数に変更します。

于 2012-04-24T13:17:02.950 に答える