-1

我正在尝试复制此页面上看到的效果：http: //www.falve.co.nz/collection/

当您滚动页面时，较暗的英雄部分下方的白色部分会滚动到顶部英雄部分的顶部，就像窗帘一样。

我如何复制这个？这是 jQuery 的事情还是 CSS 位置的事情？真的不确定如何解决这个问题？

4

2 回答 2

2

这就是所谓的视差效果，它是通过 javascript 实现的。

以下是一些可用于您自己的项目的资源。

于 2013-09-24T17:57:37.433 回答
0

如果您使用position:fixedand position : absolute，您可以使用图像背景上方的内容传递来创建效果。fadeOut()当您捕获滚动事件时，有一些 jquery 效果来管理文本。

<body>
    <div id="top">
    </div>
    <div id="content">   
    </div>
</body>

CSS

#top{
    position:fixed;
    height : 200px;
    width : 100%;
    background-image:url("http://www.falve.co.nz/site/uploads/2012/09/1500x900-collection-page-image.jpg");
    background-size:cover;
    z-index:1;
}

#content{
    position:absolute;
    height : 2000px;
    margin-top:200px;
    width : 100%;
    background-color:#F99;
    z-index:2;
}

你有这个例子http://jsfiddle.net/UVWdg/

于 2013-09-24T17:57:02.467 回答