在jquery中使用滚动条作为动画的时间线[关闭]

Question

我正在尝试在您滚动时为元素（svg）设置动画，到目前为止，我在滚动时触发了动画，但我希望滚动充当“时间线”，因此当您滚动动画时，但是如果你停止滚动，动画就会暂停，如果你向上，动画就会倒退。我想会像一个视差卷轴。

我知道有一些插件可以解决这个问题，但是由于我有时间我想知道是否可以仅使用 jquery 来完成。

所以我的问题是：有什么方法可以用纯 jquery 来做到这一点？

Answer 1

这看起来与您正在寻找的内容相同：

Jquery/Javascript Opacity animation with scroll

示例中的小提琴使用滚动位置来控制不透明度，我觉得你在很大程度上可以对动画控制做同样的事情：

http://jsfiddle.net/z7E9u/1/

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
    ,fading = $('#fading')
;

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    }
    fading.css('opacity',opacity).html(opacity);
});

当然，如果您与我们分享一些代码，我们或许可以为您提供更好的帮助。现在你只有一个模糊的问题，所以你得到的只是粗略的答案，与你解释的问题相适应。尽可能在提问时展示代码总是好的。