<!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>HTML5 NextParticle.js图像粒子化引擎演示实例</title>
<style>
.dg.ac {
z-index: 999!important;
}
</style>
</head>
<body>
<img id="logo" data-init-position="random" data-init-direction="random" src="images/beauty.jpg">
<script src='js/nextparticle.min.js'></script>
<script src='js/dat.gui.min.js'></script>
<script>
/* https://nextparticle.nextco.de */
document.all.logo.dataset.addTimestamp = true;
if (!document.all.logo.dataset.initPosition) {
document.all.logo.dataset.initPosition = 'none';
}
if (!document.all.logo.dataset.initDirection) {
document.all.logo.dataset.initDirection = 'none';
}
if (!document.all.logo.dataset.fadePosition) {
document.all.logo.dataset.fadePosition = 'none';
}
if (!document.all.logo.dataset.fadeDirection) {
document.all.logo.dataset.fadeDirection = 'none';
}
if (!/359aaa32d2d0f34ea54c7996feca84ba/.test(location.href)) {
if (!document.all.logo.dataset.width) {
document.all.logo.dataset.width = ~~window.innerWidth;
}
if (!document.all.logo.dataset.height) {
document.all.logo.dataset.height = ~~window.innerHeight;
}
}
var nextParticle = new NextParticle(document.all.logo);
nextParticle.particleGap = 2;
nextParticle.noise = 30;
nextParticle.mouseForce = 30;
nextParticle.size = Math.max(window.innerWidth, window.innerHeight);
nextParticle.colorize = false;
nextParticle.tint = '#FF00FF';
nextParticle.minWidth = nextParticle.size;
nextParticle.minHeight = nextParticle.size;
nextParticle.maxWidth = nextParticle.size;
nextParticle.maxHeight = nextParticle.size;
var redraw = function() {
nextParticle.initPosition = "none";
nextParticle.initDirection = "none";
nextParticle.fadePostion = "none";
nextParticle.fadeDirection = "none";
nextParticle.minWidth = nextParticle.size;
nextParticle.minHeight = nextParticle.size;
nextParticle.maxWidth = nextParticle.size;
nextParticle.maxHeight = nextParticle.size;
nextParticle.color = nextParticle.colorize ? nextParticle.tint : '';
nextParticle.start();
};
var gui = new dat.GUI();
gui.add(nextParticle, "particleGap", 1, 10, 1).onChange(redraw);
gui.add(nextParticle, "noise", 0, 200, 1).onChange(redraw);
gui.add(nextParticle, "mouseForce", -200, 200, 1).onChange(redraw);
gui.add(nextParticle, "size", 100, 800, 1).onChange(redraw);
gui.add(nextParticle, "colorize").onChange(redraw);
gui.addColor(nextParticle, "tint").onChange(redraw);
window.onresize(function() {
nextParticle.width = window.innerWidth;
nextParticle.height = window.innerHeight;
redraw();
});
</script>
</body>
</html>
HTML5 NextParticle.js实现图像粒子化引擎动画效果源码.zip
版权申诉
199 浏览量
2022-11-03
23:36:54
上传
评论
收藏 98KB ZIP 举报
HTML5 NextParticle.js实现图像粒子化引擎动画效果源码.zip （4个子文件） 
132689950919503558 images 
beauty.jpg 78KB
index.html 3KB js 
nextparticle.min.js 17KB dat.gui.min.js 56KB资源评论
