jQuery和CSS3超炫3D整屏垂直滚动页面特效

 查看演示  website  立即下载

使用方法

这是一款使用jQuery和CSS3制作的效果超炫的3D整屏垂直滚动页面特效。该页面滚动特效在用户滚动鼠标或点击右侧的导航圆点按钮时，当前页面会3D倾斜缩小，下一个页面会逐渐放大并占满整个屏幕，效果非常酷。

HTML结构

该特效使用嵌套<div>的HTML结构，每一个div.page是一个页面。右侧的导航按钮使用无序列表来制作。data-target属性用于和每一个页面关联。div.scroll-btn是上下导航箭头按钮。

<div class="wrapper active-page1">
  <div class="page page1">
    <h2>First page</h2>
  </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>
      ......
    </ul>
  </nav>
</div>

CSS样式

整个布局的包裹容器.wrapper使用perspective制作为3D空间。

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 1.5s;
          transition: transform 1.5s;
  -webkit-perspective: 3000;
          perspective: 3000;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

每一个页面都使用CSS3 transform属性来沿X轴旋转180度，并缩小为0.3倍。同时使用backface-visibility: hidden;将页面背面隐藏。will-change: transform;用于通知浏览器预先准备优化transform属性。

.wrapper .page {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateX(180deg) scale(0.3);
          transform: rotateX(180deg) scale(0.3);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition: transform 1s ease-in-out;
  will-change: transform;
}

在页面滚动时，使用jQuery为相应的页面添加相应的.active-page(n) class，用于在垂直方向上移动页面。例如移动第二页的CSS代码如下：

.wrapper.active-page2 {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

同时，被移动的页面恢复为100%大小。

.wrapper.active-page2 .page.page2 {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

特效中使用jQuery来在页面滚动或优化点击导航按钮时为各个页面和按钮元素添加和移除相应的class，具体的代码请参考下载文件。

PREVIOUS:
NEXT:
html5云特效背景音乐网站模板
20行 js 写的 贪吃蛇游戏