2

ユーザーがページをスクロールするたびにスピンしたいオブジェクトがあり、そのオブジェクトが現在表示されています。

そのため、サイトが最初に読み込まれたときにオブジェクトがページの真ん中にある場合、ユーザーが下にスクロールしたときにオブジェクトを「右」に回転させたいと考えています。ユーザーが上にスクロールすると、「左」にスピンします。

ビューの上部にオブジェクトが当たったときだけでなく、オブジェクトがビューにあるときはいつでも回転させる方法がわかりません。jQuery Waypoint を使用してスクロールを検出し、jQuery Transit を使用してオブジェクトをアニメーション化しています。:

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
});
4

2 に答える 2

1

これはoffset、ウェイポイントのオプションが使用されるものです。要素全体を（ビューポートの下部に）表示したい場合は、次の値を使用できます"bottom-in-view"。

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
}, {
    offset: "bottom-in-view"
});
于 2014-03-15T18:09:20.450 に答える
0

ウェイポイントの経験はあまりありませんが..次のようなことができます...

var win_height = $(window).height();
    var spinner_position = $('#home-spinner')

$(window).on('scroll', function() {
    var current_position = $(document).scrollTop();
    if (current_position >= spinner_position && current_position < spinner_position + win_height) {
        // spin it here
    };
});

おそらく、ページの以前の位置を保存し、 current_position と比較して、ユーザーがスクロールしている方向を判断したいと思うでしょう。同様に、win_heightサイズ変更時に var を再評価する必要があります。プラグインでそれを使用する方法を理解できると確信しています。

于 2014-03-08T00:51:59.830 に答える