欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【《月熊志》技术解析——沉浸式的翻阅体验】，下面是详细的分享！
《月熊志》技术解析——沉浸式的翻阅体验
《月熊志》为大家提供了一个沉浸式的翻阅体验，用户可以在页面切换时体验到真实的3D翻书效果，非常的酷炫。而要实现这个效果，需要用到CSS3 3D transform和JavaScript，同时为了实现跨浏览器和跨设备的统一体验，用到hammer.js库去处理滑动操作。
示例效果：
网页的结构十分简单，整个杂志是一个ID为magazine的div，子元素. page即页面元素，其中还需要包含一层.page-content层。
HTML:
CSS:
.page {
position: absolute;
top: 0;
left: 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
除了当前页的其他页面，为了只显示页面一半，需要将外层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%;
}
当开始拖拽时，通过鼠标位置在屏幕的左边或者右边判断翻页的方向并复制页面。然后在拖拽时，根据移动距离计算翻页进度并转换为角度应用到元素上。最后使用css transition完成余下动画。
JS代码关键部分：
$("#magazine").hammer({prevent_default: true}).on("dragstart", function(event) {
//开始拖拽
//根据指针的位置判断新的一页是上一页还是下一页
var pageX=event.gesture.center.pageX;
_.$newPage=pageX > centerX ? _.$currentPage.next(".page").addClass("next") : _.$currentPage.prev(".page").addClass("prev");
//复制当前页和新的一页
_.$pageFront=$("
").append(_.$currentPage.children().clone());
_.$pageBack=$("
").append(_.$newPage.children().clone());
$(this).on("drag", function(event) {
//拖拽中
//获得手势方向
var direction=event.gesture.direction;
//如果是左右滑动才继续
if (direction !="left" && direction !="right") return;
//获得鼠标x坐标，和窗口宽度相除获得百分比和角度
var deltaX=Math.max((_.direction=="left" ? -1 : 1) * event.gesture.deltaX, 0),
progress=deltaX / winWidth,
angle=(direction=="left" ? -180 : 180) * progress;
//使用transform翻转页面
_.$pageFront.css("transform", "perspective(2200px) rotateY(" + angle + "deg)");
_.$pageBack.css("transform", "perspective(2200px) rotateY(" + (angle - 180) + "deg)");
}).on("dragend", function(event) {
//拖拽结束
var deltaX=Math.max((direction=="left" ? -1 : 1) * event.gesture.deltaX, 0),
time=event.gesture.deltaTime,
progress=deltaX / winWidth,
flipped=progress > 0.5 || deltaX / time > 0.5, //如果滑动距离超过屏幕的一半或者速度大于0.5就认为页面被翻过去了
duration=!flipped ? 1 - progress : progress,
angle=!flipped ? 0 : _.direction=="left" ? -180 : 180;
//通过css3 transition完成余下动画
_.$pageFront.css({
"transition": "all " + duration + "s ease-out",
"transform": "perspective(2200px) rotateY(" + angel + "deg)"
});
_.$pageBack.css({
"transition": "all " + duration + "s ease-out",
"transform": "perspective(2200px) rotateY(" + (angel - 180) + "deg)"
});
});
});
如果你的页面包含视频或者Canvas等元素，那还需要再做一些额外的工作，因为这些元素并不能以同样的状态被直接复制。
最后如果你需要兼容不支持CSS3浏览器。可以借助Modernizr判断，以水平滑动的方式切换页面。
if (Modernizr.csstransforms3d && Modernizr.csstransitions) {
//支持
} else {
//不支持
};
其实，网站上还有很多特效的制作，大家可以自己前去体验：http://moonbear.animalsasia.org/ie/。希望
以上所分享的是关于《月熊志》技术解析——沉浸式的翻阅体验，下面是编辑为你推荐的有价值的用户互动：
相关问题：读《钢铁是怎样炼成的》，结合保尔的成长经历，谈...
答：3.从读了《钢铁是怎样炼成的》这本书,让我明白了...记得今年大年初一,家家户户沉浸在节日的气氛中,我...我再次把这本书翻阅,保尔的形象又浮现在眼前。对,... >>详细
相关问题：麻烦哪位能否告知我《名侦探柯南》的主线是哪几集...
答：麻烦哪位能否告知我《名侦探柯南》的主线是哪几集...沉浸在新平推理秀及蜘蛛公馆诡秘气氛中的观众们,还...212 蘑菇、熊和侦探队(前篇) 213 蘑菇、山和侦探... >>详细
相关问题：作文《二十年后回到家乡》600字
答：嗯,我帮你吧你是,我是直接从百度上复制下来给你还是怎么样? >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-