Question

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

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

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

Answer 2

终于到了那里。不幸的是，用CSS完全不可能，所以不得不恢复使用插件Curtains来实现转换 - http://curtains.herokuapp.com/

感谢大家的回复！

使div向外滚动以显示下面的主要内容

2 个答案: