带视觉差效果的垂直全屏整页滚动特效

这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效。该特效使用jQuery和CSS3完成，用户可以通过滚动鼠标来一次垂直切换一个页面，在页面切换的时候还带有一些视觉差特效。

使用方法

HTML结构

这个特效的HTML结构使用一个<div>作为包裹容器。里面每一个<section>是一个页面。

<div class="container">
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section One</p>
      <p class="content-subtitle">Subtitle One</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section Two</p>
      <p class="content-subtitle">Subtitle Two</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Section One</p>
      <p class="content-subtitle">Subtitle Three</p>
    </div>
  </section>
</div>            
              

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()函数用于页面滚动控制。

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