基于clip-path的任意元素的碎片拼接动效
2016-07-07 17:31
375 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clip[style] {
opacity: 0;
}
.active .clip:not([style]) {
opacity: 0;
animation: fadeIn .1s .9s both;
}
.active .clip[style] {
will-change: transform;
animation: noTransform 1s both;
}
@keyframes noTransform {
to {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box { height: 190px; }
.text { position: absolute; width: 300px; }
.image { position: absolute;width: 250px;}
</style>
</head>
<body>
<strong>1. 普通带文本的元素</strong>
<div class="box active">
<p id="text" class="text clip">魔兽要上映了，由于我从来没有玩过《魔兽世界》，所以无感。但是，有一点我是知道的：不管是联盟狗还是部落猪，最后都是为了艾泽拉斯！</p>
</div>
<strong>2. 替换元素如图片</strong>
<div class="box active">
<img id="image" class="image clip" src="img/24.jpg">
</div>
</body>
<script type="text/javascript">
window.onload=function () {
console.log(reader);
var clipPath=function(t){
if(!t){
return false
}
t.removeAttribute("id");
var r={
height:t.clientHeight,
width:t.clientWidth,
distance:60,
html:t.outerHTML
};
if(window.getComputedStyle(document.body).webkitClipPath){
var a=r.distance,n=r.width,e=r.height;
var o="";
for(var i=0;i<n;i+=a){
for(var h=0;h<e;h+=a){
var d=[i,h],u=[i,h+a],l=[i+a,h+a],v=[i+a,h];
var c=[i+a/2,h+a/2];
var m=[[d,c,v],[d,u,c],[c,u,l],[v,c,l]];
m.forEach(function(t,a){
var n=t.map(function(t){
return t.map(function(t){
return t+"px"
}).join(" ");
}).join();
var e="-webkit-clip-path: polygon("+n+");";
var i=Math.random();
console.log(i);
var h=i<.5?-1:1;
/* var d=[[h*(200+Math.round(500*i)),-1*(500+Math.round(300*i))],[h*(100+Math.round(500*i)),-1*(400+Math.round(600*i))],[h*(50+Math.round(500*i)),-1*(500+Math.round(300*i))],[h*(100+Math.round(400*i)),1*(500+Math.round(700*i))]];*/
var u=[600*(.5-Math.random()),600*(.5-Math.random())];
var l="translate("+u.map(function(t){return t+"px"}).join()+") rotate("+Math.round(h*360*Math.random())+"deg)";
var v="-webkit-transform:"+l+";transform:"+l+";";
o=o+r.html.replace('">','" style="'+e+v+'">')
})
}
}
t.parentNode.innerHTML=r.html+o;return true
}
else{
t.className+=" no-clipath";return false
}
};
var eleText = document.getElementById('text'),
eleImage = document.getElementById('image');
// 碎片特效初始化
clipPath(eleText);
clipPath(eleImage);
};
</script>
</html>转自：张鑫旭博客 地址：http://www.zhangxinxu.com/wordpress/?p=5429
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 