CSS3实现整屏切换效果
来源:互联网 发布:c语言,a 什么意思 编辑:程序博客网 时间:2024/05/08 08:08
总是能看见很多广告或者网站都是使用整屏滚动的效果,一直看着都心痒痒,想自己也实现一个。最近刚学习到css3的动画效果,所以尝试使用css3做了一个整屏切换。
页面结构
实现思路与大众方法类似,如图
每个section就是一页内容,它的大小充满了屏幕(红色区域),一个container由多个section构成,我们通过改变container的位置,来达到页面切换的效果。container向下走,页面好像上移了,container向上走,页面就下移了。
html结构如下:
<!DOCTYPE html><html><head lang="ch"> <meta charset="UTF-8"> <!--适配移动端--> <meta name=”viewport” content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title> <style> body, html{ padding: 0; margin: 0; } body, html { height: 100%; /**隐藏滚动条**/ overflow: hidden; } #container, .section { height: 100%; } #section0 { background-color: #83af9b; } #section1 { background-color: #764d39; } #section2 { background-color: #ff9000; } #section3 { background-color: #380d31; } </style></head><body><div id="container"> <div class="section" id="section0"></div> <div class="section" id="section1"></div> <div class="section" id="section2"></div> <div class="section" id="section3"></div></div></body></html>
事件监听
此时窗口里只显示一个页面,我们给其加上滚动监听,因为firefox和非firefox浏览器对滚动监听支持不同,firefox浏览器向上滚动是-120,向下滚动是120,而其他浏览器向上是5,向下是-5,所以需要作判断:
<script src="http://code.jquery.com/jquery-latest.js"></script><script> //当前页面索引 var curIndex = 0; var scrollFunc = function (e) { e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ } function movePrev(){ } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome } init();</script>
为了防止在第一个页面用户上滚,最后一个页面用户下滚,所以用curIndex代表当前页面索引在滚动时作了监听,当然如果要使页面循环滚动,只需修改条件限制即可。
加入动画
动画使用到了css3里的transform属性的translate3D,我们首先需要获取到屏幕的高度,然后当页面切换的时候将container上移一个屏幕高度或下移一个屏幕高度。
使用translate3D的原因是在手机端会开启硬件加速,使动画更流畅,它接收三个参数,分别是x轴、y轴和z轴的位移。如
transform: tanslate3D(10px, 30px, 0);
修改后的js代码如下:
<script> //当前页面索引 var curIndex = 0; //container元素 var container = $("#container"); //页面总数 var sumCount = $(".section").length; //窗体元素 var $window = $(window); //动画时间 var duration = 500; var scrollFunc = function (e) { e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ container.css("transform", "translate3D(0, -" + (++curIndex) * $window.height() + "px, 0)"); } function movePrev(){ container.css("transform", "translate3D(0, -" + (--curIndex) * $window.height() + "px, 0)"); } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome //设置动画 container.css({ "transition": "all 0.5s", "-moz-transition": "all 0.5s", "-webkit-transition": "all 0.5s" }); }</script>
为了防止页面在滚动的时候用户继续滚动打乱节奏,可以用时间来强制控制,即在滚动期间不允许调用moveNext和movePrev函数,最终代码如下:
<!DOCTYPE html><html><head lang="ch"> <meta charset="UTF-8"> <meta name=”viewport” content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title> <style> body, html{ padding: 0; margin: 0; } body, html { height: 100%; overflow: hidden; } #container, .section { height: 100%; } .section { background-color: #000; background-size: cover; background-position: 50% 50%; } #section0 { background-color: #83af9b; } #section1 { background-color: #764d39; } #section2 { background-color: #ff9000; } #section3 { background-color: #380d31; } </style></head><body><div id="container"> <div class="section" id="section0"></div> <div class="section" id="section1"></div> <div class="section" id="section2"></div> <div class="section" id="section3"></div></div><script src="http://code.jquery.com/jquery-latest.js"></script><script> var curIndex = 0; var container = $("#container"); var sumCount = $(".section").length; var $window = $(window); var duration = 500; //时间控制 var aniTime = 0; var scrollFunc = function (e) { //如果动画还没执行完,则return if(new Date().getTime() < aniTime + duration){ return; } e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ //获取动画开始时的时间 aniTime = new Date().getTime(); container.css("transform", "translate3D(0, -" + (++curIndex) * $window.height() + "px, 0)"); } function movePrev(){ //获取动画开始时的时间 aniTime = new Date().getTime(); container.css("transform", "translate3D(0, -" + (--curIndex) * $window.height() + "px, 0)"); } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome container.css({ "transition": "all 0.5s", "-moz-transition": "all 0.5s", "-webkit-transition": "all 0.5s" }); } init();</script></body></html>
0 0
- CSS3实现整屏切换效果
- CSS3实现整屏切换效果
- 切换CSS3实现隐藏与显示效果
- css3实现点击切换背景图片,并且背景图片实现动画效果
- 用css3或者jquery实现切换按钮效果
- jQuery+css3实现的超酷圆角tab选项卡切换效果
- CSS3实现手机网页3D切换效果
- css3+html+Jquery实现鼠标滑过图片切换效果
- css3实现闪光效果
- css3实现按钮开关效果
- CSS3实现折纸效果
- css3实现手风琴效果
- css3实现冲击波效果
- CSS3实现气泡效果
- CSS3实现轮播图效果
- Css3实现三角效果
- css3实现幻灯片效果
- CSS3实现三角形效果
- Linux知识点小结One
- IScroll 实践指南(中)
- Android中Toolbar的使用
- Torch7在Windows8.1上安装,转载请注明出处
- java内部类
- CSS3实现整屏切换效果
- 华盛顿大学--推荐系统(协同过滤)
- Hibernate中性能优化之缓存
- shiro之登录验证过程
- JMockit对代码的约束
- 欢迎使用CSDN-markdown编辑器
- RSA加密算法
- github 上常用的两种工作模式
- Qt Creator 快捷方式总结