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

视觉差 全屏 整页滚动 2015-08-19

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

支持IE10+

演示下载 1535
使用方法

使用方法

HTML结构

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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倍,位置使用固定定位方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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);
}           

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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进行布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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()函数用于页面滚动控制。

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

本文转载请注明出处:http://www.zhuiye.com/detail_1262.html
评论区
  • 还没有评论,快来抢沙发吧!