窗口使用scrollTop时如何为元素设置动画答案

【问题标题】：How to animate an element when the window uses scrollTop窗口使用scrollTop时如何为元素设置动画
【发布时间】：2014-03-13 23:08:30
【问题描述】：

http://boy-coy.com -> 这是我在网站向下滚动时想要的元素上的完美动画。

我无法创建此效果。

使用动画设置滚动的顶部值会破坏网站：

$('div').animate({
    top : ((div_top)-$(this).scrollTop())
},{queue:false, duration: 900})

http://jsfiddle.net/Fsx7L/

这是我使用动画的示例。页面滚动时，动画有“硬停”，不流畅

在boy-coy.com的效果上，比我的好100倍。

有什么想法吗？

（对不起我的英语）

【问题讨论】：

我闻到了parallax scrolling 的味道，但我不太了解。
@13ruce1337 是的，我知道。但我不关心视差，只关心平滑动画顶部。

标签： javascript jquery jquery-ui animation jquery-animate

【解决方案1】：

我不建议为此使用 .animate()

http://jsfiddle.net/Fsx7L/1/

.css();

【讨论】：

感谢您的回复，但我希望收到类似boy-coy.com的流畅动画效果
我觉得动画是一样的，只是步骤更小。使用滚轮插件，您可以在使用鼠标滚轮时更改像素beeing scrollen的默认值，这样您就必须滚动更多，而且ankmation更流畅。而且我认为它在那个网站上看起来更好，因为有很多元素被重新定位

【解决方案2】：

好吧，我想，我明白了！

$(window).bind("scroll",function(){
    old_scroll_div = $('div').css("top").replace(/[^-\d\.]/g, '');
    new_scroll_div = div_top-$(this).scrollTop();    
    $('div').animate({
        top : Math.floor(new_scroll_div)
    },{duration : 1500, queue : false, easing : 'easeOutSine'});
})

签出： http://jsfiddle.net/Fsx7L/4/

【讨论】：