javascript - 制作一个 div 滚动以显示位于下方的主要内容

Question

我想达到在 Forde + Nichol 看到的那种效果 - http://fordenicol.com/

我希望初始 div 滚动离开，然后显示下面的主要内容并能够继续向下滚动页面。我查看了各种在线可用的显示和页脚显示，但固定高度会在尝试继续滚动浏览内容时导致问题。

https://jsfiddle.net/3gkazmb8/2/

HTML

<div class="overlay"></div>

<div class="content">

<p>Content Information</p>

</div>

</body>

CSS

body {
 padding-bottom: 600px;
}
.overlay {
 height: 1200px;
 position: relative;
 z-index: 2;
 background: red;
}

.content {
 height: 1800px;
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url(http://lorempixel.com/g/400/200/);
 background-color: #000;
 z-index: 1;
}

.content p{
 color: yellow;
 font-size: 50px;
 padding-top: 500px;
}

这是我想要实现效果的布局和总体思路，但 div 的固定高度和位置导致内容被隐藏。

如有任何帮助，我们将不胜感激。

Answer 1

我们开始吧Scroll Magic 是我过去用过的一个很棒的插件，

将其与 GSAP 动画库一起使用，您将获得流畅的动画。

教程在我附上的链接中 http://scrollmagic.io/examples/basic/section_wipes_natural.html