2

別のウェブサイトBentheBodyguardで見たものを再現しようとしていますが、それがどのように行われるのか疑問に思っています。それはある種のループであると理解していますが、どうすればよいかわかりません。

基本的には電車が画面を横切る部分です。

http://benthebodyguard.com/index.php

私が行ったことを見ると、それは特定のポイントに移動してから戻ってきます。画面に沿って移動してから再び戻るようにするにはどうすればよいですか。

http://jsfiddle.net/VWqyw/2/

4

2 に答える 2

1

あなたはこのようなことをすることができます：

http://jsfiddle.net/pGvgc/2/

$(document).ready(function(){

    var windowWidth = $(window).width();    
    $("#block").css({ "left": windowWidth}); 

    $(window).scroll(function(){       
        $("#block").css({ "left":  windowWidth  - $(window).scrollTop()});
    });
});​

基本的には、垂直スクロール位置を使用してブロックの水平位置を調整するだけです。

ちなみに、ページ上で多くのアニメーションを実行することを計画している場合は、KineticJSのようなjavascriptライブラリを使用することを検討する価値があるかもしれません。

于 2012-07-23T14:33:02.757 に答える
1

私はあなたがこのようなものを探していると信じています：

$(document).ready(function(){

    $(window).scroll(function(){
        if($(window).scrollTop() > 480 && $(window).scrollTop() < 900){
             $("#block").css({ "left": $(window).scrollTop() - 480 });
        };      
    });
});​

これにより、指定された範囲内でページのスクロール位置を基準にして要素が配置されます。

于 2012-07-23T14:33:15.790 に答える