这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效。该特效使用jQuery和CSS3完成，用户可以通过滚动鼠标来一次垂直切换一个页面，在页面切换的时候还带有一些视觉差特效。
使用方法
HTML结构
这个特效的HTML结构使用一个
Section One
Subtitle One
Section Two
Subtitle Two
Section One
Subtitle Three
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()函数用于页面滚动控制。
具体实现代码请参考下载文件。