通过 CSS3 和 Jquery 处理视差

Question

我正在开发一个单页网站，其中每个部分的背景图像视差都会滚动到另一个页面上。

这是我的 HTML：

<section class="container" id="home"></section>
<section class="container" id="about"></section>
<section class="container" id="music"></section>
<section class="container" id="news"></section>
<section class="container" id="videos"></section>
<section class="container" id="connect"></section>
<section class="container" id="contact"></section>

这是我的 CSS：

body{
  margin: 0px;
  padding: 0px;
}

.container{
  width: 1920px;
  min-height: 1080px;
  background: 100% 100% no-repeat fixed;
  margin: 0 auto;
  background-color: transparent;
}


#home{background: url(../images/landingPage.png);}
#about{background: url(../images/about.png);}
#music{background: url(../images/music.png);}
#news{background-image: url(../images/news.png);}
#videos{background-image: url(../images/videos.png);}
#connect{background-image: url(../images/connect.png);}
#contact{background-image: url(../images/contact.png);}

在下面的JSFiddle 中，顶部三个部分向下滚动，而底部四个部分向上滚动。

我想我还需要在方程式中添加一些脚本。有人可以向我展示我发布的 jsFiddle。谢谢。

Answer 1

为此，您需要一点 javascript。只需将除第一个元素（页面）之外的每个元素（页面）都设置为绝对定位，而不是固定，并且在开始时 top:100% 以避免在文档加载时看到除第一个元素之外的任何元素：

按照元素的顺序添加每个连续元素的顶部位置，即堆叠前元素的所有高度，当元素顶部边缘达到 100% 的顶部时，使元素在其相对定位之前...

选项二当所有页面都位于屏幕外（底部边缘下方）时，使用 on scroll 使每个页面逐页滚动，当一个底部边缘到达屏幕底部边缘时，开始移动另一个页面。 ..