带视觉差的单页全屏滚动效果

一款带视觉差的jQueryScrollPage单页全屏滚动效果，鼠标滚动时全屏图片垂直自动切换，其中有一个图片带有视觉差的效果，所有图片都能个自由更换，右侧显示的简易焦点样式也可以自由修改。

分类：图片代码 > 图片滚动难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，先设置好页面元素的样式，接着引入几个必要的JS文件，代码如下：

<style type="text/css">
* { margin: 0; padding: 0; }
#scrollPage {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/* picture */
#scrollPage .list {
  z-index: 1;
}
#scrollPage .list,
#scrollPage .list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#scrollPage .list li {
  background-size: cover; 
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
#scrollPage .list li:nth-child(1) {
  background-image: url(images/bg_1.jpg);
  background-repeat: no-repeat;
}
#scrollPage .list li:nth-child(2) {}
#scrollPage .list li:nth-child(3) {
  background-image: url(images/bg_3.jpg);
  background-repeat: no-repeat;
}
#scrollPage .list li:nth-child(4) {
  background-image: url(images/bg_4.jpg);
  background-repeat: no-repeat;
}
/* btn */
#scrollPage .btn {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 40%;
}
#scrollPage .btn span {
  display: block;
  width: 2px;
  height: 40px;
  margin: 10px 0;
  background-color: #fff;
}
#scrollPage .btn span.cur {
  background-color: #0099ff;
}
/* 视觉差 */
#overMove {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#overMove div {
  position: relative;
  left: 0;
  top: 0;
  width: 110%;
  height: 110vh;
}
#overMove div:nth-child(2) { position: absolute; }
#overMove div:nth-child(3) { position: absolute; }
#overMove div i {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -5%;
  top: -5%;
  background-size: cover;
  background-repeat: no-repeat;
}
#overMove div:nth-child(1) i {
  background-image: url(images/bgpart_1.png);
  background-position: center;
}
#overMove div:nth-child(2) i {
  
}
#overMove div:nth-child(3) i {
  background-image: url(images/bgpart_3.png);
}
</style>
<script type="text/javascript" src="js/tween.js"></script>
<script type="text/javascript" src="js/startmove.js"></script>
<script type="text/javascript" src="js/requestanimate.js"></script>
<script type="text/javascript" src="js/index.js"></script>

页面的body部分，重点注意一下div容器里的ul无序列表，代码如下：

<div id="scrollPage">
  <ul class="list">
    <li></li>
    <li>
      <div id="overMove">
        <div data-scale="0.3"><i></i></div>
        <div data-scale="0.5"><i></i></div>
        <div data-scale="0.7"><i></i></div>
      </div>
    </li>
    <li></li>
    <li></li>
  </ul>
  <div class="btn">
    <span class="cur"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>