<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GSAP 翻飞的卡片</title>
<style>
body {
background: black;
-webkit-perspective: 600;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 50% 50%;
overflow: hidden;
}
.cardWrap {
-webkit-transform-style: preserve-3d;
position: absolute;
width: 0px;
height: 0px;
transform: translateZ(-24000px);
}
.card {
width: 20px;
height: 30px;
margin-left: -10px;
margin-top: -15px;
background: rgb(37, 200, 45);
-webkit-transform-style: preserve-3d;
}
</style>
</head>
<body>
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(window).on('resize', function() {
$('body').css({
width: $(window).width(),
height: $(window).height()
});
}).trigger('resize');
function FlyCard() {
this.wrap = $('<div class="cardWrap"><div class="card"></div></div>');
this.card = this.wrap.find('.card');
var me = this;
var addRound = 1;
var minRound = 1;
var rz = Math.random() * 360 * addRound + 360 * minRound;
var rx = Math.random() * 360 * addRound + 360 * minRound;
var ry = Math.random() * 360 * addRound + 360 * minRound
rz = rz / 2 - rz;
rx = rx / 2 - rx;
ry = ry / 2 - ry;
var offsetLeft = Math.random() * 120 - 60 + 50;
var offsetTop = Math.random() * 120 - 60 + 50;
TweenLite.set(this.wrap, {
left: '50%',
top: '50%',
display: 'block'
});
TweenLite.to(this.wrap, 2, {
left: offsetLeft + '%'
});
TweenLite.to(this.wrap, 2, {
top: offsetTop + '%'
});
TweenLite.fromTo(this.wrap, 1, {
css: {
transform: 'translateZ(-2400px)'
}
}, {
css: {
transform: 'translateZ(0px)'
}
});
TweenLite.to(this.wrap, 1, {
opacity: 0,
delay: 1
});
TweenLite.to(this.wrap, 2, {
rotationZ: rz,
rotationX: rx,
rotationY: ry,
onComplete: function() {
me.wrap.remove();
}
});
$('body').append(this.wrap);
}
(function loop() {
new FlyCard();
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
