使用滚动条作为jquery中动画的时间轴

Question

我试图在滚动时动画元素（svg），这一点我在滚动时触发动画，但我希望滚动作为＆＃34;时间轴＆＃34;，所以当你滚动动画开始时，但是如果你停止滚动动画暂停，如果你上去动画就会倒退。我想这就像一个视差滚动。

我知道那里有插件可以解决问题，但是因为我有时间，我想知道是否可以用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);
});

如果您与我们分享一些代码，我们可能会帮助您更好。现在你只是对一个想法有一个模糊的问题，所以你得到的是关于适合你解释的问题的粗略答案。在可能的情况下提问时，总是很好地展示代码。