Question

我正在尝试在用户滚动时翻译元素。

如果可能的话，要向上滚动，然后向上滚动课程。

我认为这是可能的，因为魔术棒在此演示中向下滚动：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;
});

Answer 1

<强> DEMO

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像素之前不会启动动画，并且当您＆lt;时，它会反转动画。 1000像素。我只是从左向右翻译，但这适用于任何翻译值。

更新了 demo 和代码......

var controller = new ScrollMagic();

var scene = new ScrollScene({ offset: 1000}).setTween( new TweenMax.to('#foo', 2, { css: { top: 150 } }), 1000)
    .addTo(controller);

用户滚动时，如果可能，在两个类之间转换/补间元素

1 个答案: