javascript - 如何将开始和结束位置应用于 jquery 视差动画

Question

这是我目前拥有的。

不过我需要添加一层细节。我想要的是从 0-1000px 不增加不透明度，然后从 1000-1500 不透明度从 0 淡化到 1。

我该怎么做？

使用这个:(woking jsFiddle)

function EasyPeasyParallax() {
    scrollPos = $(document).scrollTop();
        $('#nav').css({
            'opacity': 0+(Math.min(scrollPos/800,1))
        });
};

$(function(){
    $('body').bind('mousewheel',EasyPeasyParallax);
});

Answer 1

您可以在 HTML5 浏览器支持中使用 css3 执行此操作:

@-webkit-keyframe{ /* for chrome browser */
 0%{
 }
 50%{
 }
 100%{
 }
}
@keyframe{ /*do the same for other browser */
 0%{
 }
 50%{
 }
 100%{
 }
}