3

各カーテンが真ん中で出会った直後に、約 20px のスクロールの一時停止アニメーションが必要です。ここに私のサンドボックスがあります：

http://www.meetgeraldine.net/2016website/luke-test/

jQuery: http://snippi.com/s/vup8pw0

HTML: http://snippi.com/s/bp5iceg

2 つのブロックが途中で交わった直後にカーテンがフェードアウトしないように、約 20 ピクセルのスクロールでカーテンを一時停止させる方法はありますか?

4

2 に答える 2

0

ライブラリに基づいて回答を受け入れる場合は、適切な解決策があります。

skrollr https://github.com/Prinzhorn/skrollr

このライブラリを使用して目標を達成する方法を説明するチュートリアルを見ることができます。

ihatetomatoes https://ihatetomatoes.net/create-scrolling-slideshow-using-skrollr/

主なアイデアは次のとおりです。メイン コンテンツの高さ 100%+20px のページを作成し、コンテンツの位置を js で変換します。スクロールが 50%-10px から 50%+10px の間にある場合は、メイン コンテンツの変換を停止できます。

于 2016-02-04T17:48:49.057 に答える
0

時限アニメーション リピーターの例を次に示します。すべてのアニメーションが完了するのを待ってから、タイムアウト後にアニメーションを繰り返します。それがあなたの望みであると 100% 確信できるわけではありませんが、うまくいけば、これから構築することができます:

function pullCurtains(){
    $.when(
        $('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false; }).promise(),
        $( '#mything-2' ).animate( { marginLeft : "-100px" }, 500 ).promise(),
        $( '#mything-3' ).animate( { width: 0 }, 1000 ).promise()
    ).done( function(){
        console.log( "All animations complete." );
        setTimeout(function() {
            // trigger new one in 2000 ms
            $(document).trigger('curtian');
        }, 2000);
    });
};
$(document).on('curtian',function(){
    pullCurtains();
});
// do first one
$(document).trigger('curtian');
于 2016-02-04T19:50:43.703 に答える