javascript - 翻译/补间元素，如果可能的话，在两个类之间，当用户滚动时

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

演示

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);