web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
滚动
jQuery和CSS3超炫3D整屏垂直滚动页面特效
分类:
滚动
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### HTML结构 该特效使用嵌套div的HTML结构,每一个div.page是一个页面。右侧的导航按钮使用无序列表来制作。data-target属性用于和每一个页面关联。div.scroll-btn是上下导航箭头按钮。 ```html
First page
......
......
``` ##### 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,具体的代码请参考下载文件。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告