0

ユーザーがスクロールするときに要素を翻訳しようとしています。

可能であれば、上にスクロールしてクラスに移動し、下にスクロールしてクラスから移動します。

このデモでは、魔法の杖がスクロールダウンでこれを行うので、これは可能だと思います: http://janpaepke.github.io/ScrollMagic/

しかし、このスクリプトの使い方がわかりません ( https://github.com/janpaepke/ScrollMagic )

ユーザーが上下にスクロールしているかどうかを示すコードは次のとおりです。

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    if(scrollTop>lScrollTop){
        //scroll up
    }
    else{
        //scroll down
    }
    lScrollTop = scrollTop;
});
4

1 に答える 1

1

デモ

var controller = new ScrollMagic(); 

var scene = new ScrollScene(offset: 1000).setTween( new TweenMax.to('#foo', 2, { css: { transform: 'translate3d(500px, 0, 0)' }}))
    .addTo(controller);

その要素の固定位置を設定して、折りたたみを超えてスクロールしないようにしました (デモ用)。1000 ピクセルスクロールするまでアニメーションが開始されず、1000 ピクセル未満になるとアニメーションが反転することがわかります。左から右に翻訳しているだけですが、これはどの翻訳値でも機能します。

更新されたデモとコード...

var controller = new ScrollMagic();

var scene = new ScrollScene({ offset: 1000}).setTween( new TweenMax.to('#foo', 2, { css: { top: 150 } }), 1000)
    .addTo(controller);
于 2014-03-10T20:28:38.987 に答える