Question

如何制作像Mesut Oezils webpage一样的效果我的意思是背景移动的效果与页面的其余部分一样慢。或者页面末尾的效果，其中最后一个内容向上滚动并且页脚站立。是否有jquery插件或我该怎么做？

最后一个问题：例如，我的目标网页上有一张不透明度为1的大图片。当我开始向下滚动时（如果图像保持位置：固定），如何将不透明度降低到0.3。当不透明度基于滚动的px直到最小值（如0.3）时，它会很酷，因此它不是在固定点触发的动画。

Answer 1

第一个效果叫做Parallax Scrolling。这里有一个jquery插件，例如：http://stephband.info/jparallax/

对于Fade On Scroll效果，您还可以使用jquery。这里有一个例子：http://jsfiddle.net/z7E9u/1/

此Fade On Scroll的html代码：

<html>
    <body style="height:9999px;">
        <div id="fading" style="margin-top:200px;background:#aaa;">Fading</div>
    </body>
</html>

此Fade On Scroll的javascript代码：

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

更新了JSFiddle： http://jsfiddle.net/CqrJV/

如何在MesutOezil网页上制作这些效果？

1 个答案: