jparticles
Version:
A succinct, efficient, and lightweight Canvas plugin library for building some cool particle effects.
107 lines (98 loc) • 3.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<style>
#page,
#instance,
iframe {
width: 100%;
height: 100%;
overflow: hidden;
border: none;
}
#instance {
background-color: rgba(0, 0, 0, .5);
background-color: #fff;
position: fixed;
top: 0;
left: 0;
text-align: center;
}
#demo {
display: inline-block;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
border-radius: 50%;
border-color: #ececec;
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<div id="instance">
<div id="demo"></div>
</div>
<div id="page">
<iframe src="http://qq.com/" frameborder="0"></iframe>
</div>
<script src="../production/jparticles.js"></script>
<script src="../production/wave_loading.js"></script>
<script>
JParticles.utils.extend(JParticles.easing, {
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
});
(function () {
var instance = document.getElementById('instance');
var demo = document.getElementById('demo');
var loading = new JParticles.waveLoading(demo, {
font: 'normal 900 14px Arial',
// 扩展 easing
easing: 'easeOutBounce',
// 对于不需要自适应的，应该设置 resize: false，
// 减少计算，提高性能
resize: false
});
loading
.onProgress(function (progress) {
// 如果进度大于 60，设置文本颜色为白色
if (progress >= 60) {
loading.setOptions({
color: '#fff'
});
}
return '加载中...' + Math.ceil(progress) + '%';
})
.onFinished(function () {
setTimeout(function () {
instance.parentNode.removeChild(instance);
}, 100);
})
.onDestroy(function () {
console.info('onDestroy: Canvas has been removed!!!')
});
window.onload = function () {
loading.done();
};
setTimeout(function () {
loading.done();
}, 6000);
})();
</script>
</body>
</html>