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

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

现在，我非常熟悉

z-index

和CSS定位

然而，我似乎不能得到正确的组合，使它的工作方式，我想

HTML:

内容

因此，

#main

将显示在

#显示部分

的顶部，一旦用户向下滚动到某个点，

#显示部分

就会滑出

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

有什么想法吗？我更喜欢只使用CSS的解决方案

---

这里！： 我想从幻灯片3过渡到幻灯片4，但必须是内容，而不仅仅是背景图像

我发现我还需要一个页脚，它看起来像是最初附加到

#main

，但当用户向下滚动时，

#显示部分

“展开”

---

我猜其中一种方法是将页脚粘贴在屏幕底部的某个点上。有什么提示吗？

可以制作显示部分

位置：固定
。占位符应该有一个设置的高度，只是为了扩展页面，以便用户可以向下滚动并查看显示的固定div

HTML

查看：
你是说boy coy.com中的parallex滚动功能吗？有点……我真的不需要这些项目浮动。这更像是在屏幕的底部，而不是顶部。好吧，让我们稍微调整一下情况。在显示的内容下方有一个页脚。当用户到达页脚时，似乎就剩下这些了。但他们可以继续滚动，滚动条上会显示
#显示的内容。换句话说，
#显示的节占位符
在滚动条上的高度增加。请看这里：我希望页脚一出现就粘到页面底部。这样看来，
显示部分
正在扩展。
<div id="main">Content content content content content content</div>
<div id="revealed-section"></div>

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

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