作为包裹容器。里面每一个是一个页面。

CSS样式

所有页面的通用背景样式如下：它将背景的高度设置为视口的1.3倍，位置使用固定定位方式。

.background {

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

overflow: hidden;

will-change: transform;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

height: 130vh;

position: fixed;

width: 100%;

-webkit-transform: translateY(20vh);

-ms-transform: translateY(20vh);

transform: translateY(20vh);

-webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);

transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);

}

然后在背景上添加一些图片和文本样式。

.background:first-child {

background-image: url(1.jpg);

-webkit-transform: translateY(-10vh);

-ms-transform: translateY(-10vh);

transform: translateY(-10vh);

}

.background:first-child .content-wrapper {

-webkit-transform: translateY(10vh);

-ms-transform: translateY(10vh);

transform: translateY(10vh);

}

.background:nth-child(2) { background-image: url(2.jpg); }

.background:nth-child(3) { background-image: url(3.jpg); }

所有的页面中内容的布局都使用flexbox进行布局。

.content-wrapper {

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

text-align: center;

-webkit-flex-flow: column nowrap;

-ms-flex-flow: column nowrap;

flex-flow: column nowrap;

color: #fff;

font-family: Montserrat;

text-transform: uppercase;

-webkit-transform: translateY(40vh);

-ms-transform: translateY(40vh);

transform: translateY(40vh);

will-change: transform;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);

transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);

}

JAVASCRIPT

在jQuery代码中，parallax()函数用于滚动检测和视觉差效果的制作。slideDurationTimeout()函数用于临时锁定滚动。nextItem()，currentSlideTransition()和previousItem()函数用于页面滚动控制。

具体实现代码请参考下载文件。