javascript - 通过 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。只需让每个元素(页面)但第一个元素绝对定位，不固定，并在开始顶部:100% 以避免看到除第一个元素之外的任何元素，在文档加载时执行此操作:

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

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