HTML动画(三) 画卷展开
-
动图展示:
-
源码资源
画卷展开 -
HTML画卷展开动画原理
通过HTML5新特性requestAnimationFrame控制 左右DIV的left,right值实现动画;核心功能requestAnimationFrame会自动随着屏幕的刷新频率自动执行,相比于setTimeout()、setInterval(),它可以更好的服务于2Dcanvas动画、WebGL动画等方面; -
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#maskBox {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
/* 父盒子 */
#maskMoveLeft,#maskMoveRight {
position: absolute;
z-index: 99;
height: 100%;
overflow: hidden;
width: 50%;
}
#maskMoveLeft {
left: 0;
}
#maskMoveRight {
right: 0;
}
/* 子盒子 */
#mask_left,#mask_right{
width: 100%;
height: 100%;
position:absolute;
top: 0;
}
#mask_left {
left: 0;
background: url(images/left.png) no-repeat center;
background-size: 100%;
}
#mask_right {
right: 0;
background: url(images/right.png) no-repeat center;
background-size: 100%;
}
/* 图片 */
#maskImg_right {
position: absolute;
z-index: 99;
height: 100%;
left: 0;
}
#maskImg_left {
position: absolute;
z-index: 99;
height: 100%;
right: 0;
}
#contantMain{
width: 100%;
height: 100%;
background: #ccc;
position: absolute;
z-index: 9;
}
</style>
</head>
<body>
<div id="contantMain">内容</div>
<div id="maskBox">
<div id="maskMoveLeft">
<img id="maskImg_left" src="./images/mask.png" />
<div id="mask_left"></div>
</div>
<div id="maskMoveRight">
<img id="maskImg_right" src="./images/mask.png" />
<div id="mask_right"></div>
</div>
</div>
<script type="text/javascript">
// 画面展开
var bodyW = 1920;
var maskMove = null,progress = 0;
var leftParent = document.getElementById('maskMoveLeft'),
leftChild = document.getElementById('mask_left'),
rightParent = document.getElementById('maskMoveRight'),
rightChild = document.getElementById('mask_right');
function render() {
progress += 15; //修改图像的位置
// 左侧
// 父框右移动
leftParent.style.left = -(progress)+'px';
// 子框左移动
leftChild.style.left = progress+'px';
// 右侧
// 父框右移动
rightParent.style.right = -(progress)+'px';
// 子框左移动
rightChild.style.right = progress+'px';
// 结束运动
if (progress >= bodyW/2) {
//结束 清除dem
leftParent.remove();
rightParent.remove();
window.cancelAnimationFrame(maskMove);
maskMove = null;
return;
}
maskMove = window.requestAnimationFrame(render);
}
// 进入页面后延时开启动画展示
setTimeout(function(){
render();
},1000)
</script>
</body>
</html>