js切割图片切割，碎片化动画展示
2016-04-08 本文已影响1610人
webCoder
今天上网学习前端小技巧，看到一个酷炫的功能，链接在此。怀着激动的心情，在本地测试了一下，发现效果还不错，兼容性：chrome最佳，firefox,360,ie9以上其次。
首先看页面效果，因为是截图的原因，所以页面效果不太好截图，真的很帅。
- chrome:
pic1.png
pic2.png
pic3.png
连贯的gif.gif
备注： gif图录制的不好，见谅~ 具体效果在文章底部下载本例子，查看效果。
页面上的文字，其实是一张透明的图片，后面的房子是大的背景。
pic4.png
- 火狐，360，ie9以上虽然不会像在谷歌下一样切割显示，但是也能渐变显示，效果也是可以的
pic5-1.png
pic5-2.png
- 页面最后生成的源码，我们会发现图片所在的div被切割成了多个小的div
pic6.png
- 最后看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
height: 100%;
padding: 0;
margin: 0;
}
body {overflow:hidden;}
body {
width:100%;
height:100%;
padding: 0;
margin: 0;
}
#btn {
width: 100px;
height: 50px;
}
#screen_2 {
position: relative;
width: 100%;
height: 430px;
overflow: hidden;
background:url(bg.png) no-repeat;
background-size: 100% 100%;
}
#screen_2 .ctn {
position: absolute;
top: 0;
left: 0;
width:100%;
height:430px;
-webkit-transform-style:preserve-3d;
}
#screen_2 .ctn div {
position:absolute;
transition: 0.6s all ease;
-webkit-transition: 0.6s all ease;
transform:translate(0,0) translateZ(0) scale(1,1) rotateX(0deg) rotateY(0deg);
-webkit-transform:translate(0,0) translateZ(0) scale(1,1) rotateX(0deg) rotateY(0deg);
}
#screen_2 .ctn div {
background: url(text.png) no-repeat;
}
</style>
</head>
<body>
<div id="screen_2">
<button id="btn">点我</button>
<div class="ctn"></div>
</div>
<script src="jquery.js"></script>
<script>
function rnd(n, m)
{
return parseInt(Math.random()*(m-n)+n);
}
function addClass(ele, className) {
var oriClass = ele.className;
if(oriClass) {
ele.className = oriClass+' '+className;
} else {
ele.className = className;
}
}
function removeClass (el, className) {
var cls = el.className;
if(cls.indexOf(className)>=0) {
el.className = el.className.replace(new RegExp('(?:^|\\s)'+className+'(?=\\s|$)', 'ig'), '');
}
}
function replaceClass (el, cls1, cls2) {
removeClass(el, cls1);
addClass(el, cls2);
}
window.onload = function () {
var screen2 = document.getElementById('screen_2');
var oDiv = screen2.getElementsByClassName('ctn')[0];
var isAudioTempPause = false;
var C=4;
var R=8;
var divCX=oDiv.offsetWidth/2; //容器的中心点
var divCY=oDiv.offsetHeight/2; //容器的中心点
var isAnimating = false;
var showNodes = 0;
var hideNodes = 0;
var cur_status = -1;
var os = {};
function animateSpread (cb) {
hideNodes = 0;
for(var i=0;i<R;i++)
{
for(var j=0;j<C;j++)
{
var oNewDiv = document.getElementById('new_'+i+'_'+j);
if(!oNewDiv) {
cb('no element');
return;
}
//飞走——跟中心的距离——方向
var l=oNewDiv.offsetLeft+oNewDiv.offsetWidth/2;
var t=oNewDiv.offsetTop+oNewDiv.offsetHeight/2;
var disX=l-divCX;
var disY=t-divCY;
(function (oNewDiv, disX, disY){
setTimeout(function (){
oNewDiv.style.WebkitTransform='perspective(800px) translate3d('+disX+'px, '+disY+'px, 600px) rotateY('+rnd(-180, 180)+'deg) rotateX('+rnd(-180, 180)+'deg) scale(2,2)';
oNewDiv.style.opacity=0;
setTimeout(function (){
oDiv.removeChild(oNewDiv);
hideNodes ++;
if(hideNodes == i * j && cb) cb();
}, 600);
}, rnd(1, 301));
})(oNewDiv, disX, disY);
}
}
}
function animateAggregate (cb) {
showNodes = 0;
for(var i=0;i<R;i++)
{
for(var j=0;j<C;j++)
{
//创建
var w=Math.floor(oDiv.offsetWidth/C);
var h=Math.floor(oDiv.offsetHeight/R);
var oNewDiv=document.createElement('div');
oNewDiv.id='new_'+i+'_'+j;
oNewDiv.style.opacity=0;
oNewDiv.style.left=j*w+'px';
oNewDiv.style.top=i*h+'px';
oNewDiv.style.width=w+'px';
oNewDiv.style.height=h+'px';
var offsetLeft = j*w;
var offsetTop = i*h;
var l=offsetLeft+w/2;
var t=offsetTop+h/2;
var disX=l-divCX;
var disY=t-divCY;
oNewDiv.style.WebkitTransform='perspective(800px) translate3d('+disX+'px, '+disY+'px, 600px) rotateY('+rnd(-180, 180)+'deg) rotateX('+rnd(-180, 180)+'deg) scale(2,2)';
oNewDiv.style.opacity=0;
oNewDiv.style.backgroundPosition = '-'+offsetLeft+'px -'+offsetTop+'px';
oDiv.appendChild(oNewDiv);
//飞来——跟中心的距离——方向
(function (oNewDiv, disX, disY){
setTimeout(function (){
oNewDiv.style.WebkitTransform='translate3d(0,0,0)';
oNewDiv.style.opacity=1;
showNodes ++;
if(showNodes == i * j && cb) cb();
}, rnd(300, 500));
})(oNewDiv, disX, disY);
}
}
}
function hideAndShow (status, isBack) {
animateSpread(function(){
animateAggregate(function(){
isAnimating = false;
});
});
}
function bindEvents () {
var ua = navigator.userAgent;
var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
if(android || ipad || ipod || iphone) {
$('#btn').on('touchstart', hideAndShow);
} else {
$('#btn').on('click', hideAndShow);
}
}
function init () {
animateAggregate();
bindEvents();
}
init();
}
</script>
</body>
</html>
