当前位置：首页 > 网页特效 > 滚动

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

分类：滚动日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<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空间。

```html
.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属性。

```html
.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代码如下：

```html
.wrapper.active-page2 {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}      
```          
同时，被移动的页面恢复为100%大小。

```html
.wrapper.active-page2 .page.page2 {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}    
```            
特效中使用jQuery来在页面滚动或优化点击导航按钮时为各个页面和按钮元素添加和移除相应的class，具体的代码请参考下载文件。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果