jQuery和CSS3全屏开关门切换页面特效

这是一款效果非常炫酷的jQuery和CSS3全屏开关门切换页面特效。该页面切换特效可以使用鼠标上下滚动来切换页面。向下滚动时页面像开门一样从中间展开展示下一页，向上滚动时页面像关门一样从两侧收缩展示上一页。

制作方法

HTML结构

该页面切换特效的HTML结构非常简单。使用一个div.scene作为整个页面的包裹容器。每一个div.page是一个页面。div.nav-panel是右侧的圆点单行按钮和箭头导航按钮。

<div class="scene">
  <div class="page page-1 active">
    <div class="half left"></div>
    <div class="half right withText">
      <h2 class="heading">Page 1</h2>
    </div>
  </div>
  ......
</div>
<div class="nav-panel">
  <div class="scroll-btn up"></div>
  <div class="scroll-btn down"></div>
  <nav>
    <ul>
      <li data-target="1" class="nav-btn nav-page1 active"></li>
      <li data-target="2" class="nav-btn nav-page2"></li>
      <li data-target="3" class="nav-btn nav-page3"></li>
      <li data-target="4" class="nav-btn nav-page4"></li>
    </ul>
  </nav>
</div>          
              

CSS样式

所有的页面都被设置为绝对定位，宽度和高度都设置为100%。同时为transform和opacity属性设置了平滑过渡效果，并使用will-change属性来通知浏览器要优化这两个属性。

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform .7s, opacity .7s;
          transition: transform .7s, opacity .7s;
  will-change: transform, opacity;
}           
              

在每一页中，都使用.left和.right将页面分为左右两个部分，并使用nth-child选择器来为它们分别设置背景图片：

.page:nth-child(1) .left {
  background-image: url("http://i.imgur.com/dqQ7i1P.jpg");
}
.page:nth-child(1) .right {
  background-image: url("http://i.imgur.com/odir8q1.jpg");
}
......                
              

开始的时候，除了第一个页面，其它页面的左右部分都分别使用translateX来将它们移动屏幕之外。

.page:nth-child(2) .left {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}
.page:nth-child(2) .right {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
......                
              

当滚动到相应的页面的时候，在将它们移动会屏幕中间。这些操作是在jQuery代码中完成的。

具体的js代码请参考下载文件。