推荐设备MORE

砍价微信小程序—积分商场微

砍价微信小程序—积分商场微

行业新闻

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

日期:2021-04-15
我要分享

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


短视頻,自新闻媒体,达人种草1站服务

《月熊志》为大伙儿出示了1个沉浸于式的翻阅体验,客户能够在网页页面切换时体验到真正的三d翻书实际效果,十分的炫酷。而要完成这个实际效果,必须用到CSS3 三d transform和JavaScript,另外以便完成跨访问器和跨机器设备的统1体验,用到hammer.js库好去处理拖动实际操作。

 

示例实际效果:

 

网页页面的构造10分简易,全部杂志是1个ID为magazine的div,子元素. page即网页页面元素,在其中还必须包括1层.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%;

}

当客户拖拽网页页面时,大家会拷贝1份当今页和下1页,做为三d换页的元素存在,层之间的关联以下:

$currentPage - 当今页

$newPage - 新的1页(上1页/下1页)

$pageBack - 克隆的$newPage

$pageFront - 克隆的$currentPage

 

除当今页的别的网页页面,以便只显示信息网页页面1半,必须将外层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) {

//刚开始拖拽

//依据指针的部位分辨新的1页是上1页還是下1页

var pageX = event.gesture.center.pageX;

_.$newPage = pageX centerX ? _.$currentPage.next(".page").addClass("next") : _.$currentPage.prev(".page").addClass("prev");

//拷贝当今页和新的1页

_.$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) * event.gesture.deltaX, 0),

progress = deltaX / winWidth,

angle = (direction == "left" ? ⑴80 : 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) * event.gesture.deltaX, 0),

time = event.gesture.deltaTime,

progress = deltaX / winWidth,

flipped = progress 0.5 || deltaX / time 0.5, //假如拖动间距超出显示屏的1半或速率超过0.5就觉得网页页面被越过去了

duration = !flipped ? 1 - progress : progress,

angle = !flipped ? 0 : _.direction == "left" ? ⑴80 : 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等元素,那还必须再做1些附加的工作中,由于这些元素其实不能以一样的情况被立即拷贝。

最终假如你必须适配不适用CSS3访问器。能够依靠Modernizr分辨,以水光滑动的方法切换网页页面。

if (Modernizr.csstransforms3d Modernizr.csstransitions) {

//适用

} else {

//不适用

};

实际上,网站上也有许多殊效的制作,大伙儿能够自身前往体验:。期待本文能给大伙儿带来1些设计灵感,应用到自身的网站开发设计上面去。