《月熊志》技术解析——沉浸式的翻阅体验

《《月熊志》技术解析——沉浸式的翻阅体验》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、《月熊志》技术解析——沉浸式的翻阅体验《月熊志》为大家提供了一个沉浸式的翻阅体验，用户可以在页面切换时体验到真实的3D翻书效果，非常的酷炫。而要实现这个效果，需要用到CSS33Dtransform和JavaScript，同时为了实现跨浏览器和跨设备的统一体验，用到hammer.js库去处理滑动操作。示例效果：网页的结构十分简单，整个杂志是一个ID为magazine的div，子元素.page即页面元素，其中还需要包含一层.page-content层。HTML:CSS:.page{position:absolute;top:0;left:

2、0;width:100%;height:100%;overflow:hidden;display:none;}.page-content{position:absolute;top:0;left:0;width:100%;height:100%;}当用户拖拽页面时，我们会复制一份当前页和下一页，作为3D翻页的元素存在，层之间的关系如下：$currentPage->当前页$newPage->新的一页(上一页/下一页)$pageBack->克隆的$newPage$pageFront->克隆的$currentPage除了当前页的其他页面，为

3、了只显示页面一半，需要将外层div的宽度设置为50%，同时将.page-content设为200%。CSS:.page.front,.page.back,.page.prev,.page.next{width:50%;}.page.front.page-content,.page.back.page-content,.page.prev.page-content,.page.next.page-content{width:200%;}当开始拖拽时，通过鼠标位置在屏幕的左边或者右边判断翻页的方向并复制页面。然后在拖拽时，根据移动距离计算

4、翻页进度并转换为角度应用到元素上。最后使用csstransition完成余下动画。JS代码关键部分：$("#magazine").hammer({prevent_default:true}).on("dragstart",function(event){//开始拖拽//根据指针的位置判断新的一页是上一页还是下一页varpageX=event.gesture.center.pageX;_.$newPage=pageX>centerX?_.$currentPage.next(".page").addClass("next"):_.$cur

5、rentPage.prev(".page").addClass("prev");//复制当前页和新的一页_.$pageFront=$("").append(_.$currentPage.children().clone());_.$pageBack=$("").append(_.$newPage.children().clone());$(this).on("drag",function(event){//拖拽中//获得手势方向vardirection=event.gesture.direction;//如果是左右滑动才继续if(di

6、rection!="left"&&direction!="right")return;//获得鼠标x坐标，和窗口宽度相除获得百分比和角度vardeltaX=Math.max((_.direction=="left"?-1:1)*event.gesture.deltaX,0),progress=deltaX/winWidth,angle=(direction=="left"?-180:180)*progress;//使用transform翻转页面_.$pageFront.css("transform","perspective(2200

7、px)rotateY("+angle+"deg)");_.$pageBack.css("transform","perspective(2200px)rotateY("+(angle-180)+"deg)");}).on("dragend",function(event){//拖拽结束vardeltaX=Math.max((direction=="left"?-1:1)*event.gesture.deltaX,0),time=event.gesture.deltaTime,progress=deltaX/winWidth,flipp

8、ed=progress>0.5

9、

10、deltaX/time>0.5,//如果滑动距离超过屏幕的一半或者速度大于0.5就认为页面被翻过去了duration=!flipped?1-progress:progress,angle