简单视差、CSS 图层、滚动时显示最后一部分

我最近在网络世界中看到了一个非常酷的效果。这就是“层次感”。用户将向下滚动页面，最后一部分将出现在页面的前几个部分下方。有时它带有图像，但我发现内容也可以这样显示。

现在，我已经很熟悉了z-index和 CSS 定位。

然而，我似乎无法找到正确的组合来使其按照我想要的方式工作。

HTML:

<div id="main">Content content content content content content</div>
<div id="revealed-section"></div>

So #main看起来就像是在上面#revealed-section，一旦用户向下滚动到某个点#reveal-section滑出。

我做了很多搜索，但我不知道这种技术的术语。

有任何想法吗？我更喜欢纯 CSS 解决方案。

Here!: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html我想要从幻灯片 3 过渡到幻灯片 4，但它必须包含内容而不仅仅是背景图像。

我发现我还想要一个看起来好像最初附加到的页脚#main，但是当用户进一步向下滚动时，#revealed-section“扩大”。

我猜想做到这一点的一种方法是将页脚固定在屏幕底部的某个点。有小费吗？

可以制作显露的部分position:fixed。占位符应该有一个设定的高度，只是为了扩展页面，以便用户可以向下滚动并看到显示的固定 div。

HTML

<div id="main">Content content content content content content</div>
<div id="revealed-section-placeholder"></div>
<div id="revealed-section"> Content here </div>

CSS

#main {position:relative; z-index: 1;} 
#revealed-section {position:fixed; bottom: 0;} 

一探究竟：http://jsfiddle.net/qYbs7/1/ http://jsfiddle.net/qYbs7/1/