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

查看演示立即下载

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

使用方法

这是一款使用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，具体的代码请参考下载文件。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： 20行 js 写的贪吃蛇游戏
下一个特效： html5云特效背景音乐网站模板