particles.js 是一个轻量级的 JavaScript 库，用于创建粒子效果。它允许开发者轻松地在网页上添加动态的粒子背景，适用于各种创意和互动性的项目。
如何使用
particles.js
<script src="js/particles.js" type="text/javascript"></script>
HTML 结构
<div id="particles-bg"> </div>
JavaScript 配置
<script>
particlesJS("particles-bg", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800} },
color: { value: "#ffffff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 1,
random: true,
anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 1,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 600 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: false, mode: "bubble" },
onclick: { enable: false, mode: "repulse" },
resize: true
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1} },
bubble: { distance: 250, size: 0, duration: 2, opacity: 0, speed: 3 },
repulse: { distance: 400, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
</script>参数 配置
particles.number.value number 数量
particles.number.density.enable boolean
particles.number.density.value_area number 区域散布密度大小
particles.color.value 原子的颜色
particles.shape.type string array selection 原子的形状
particles.shape.stroke.width number 原理的宽度 2
particles.shape.stroke.color HEX (string) 原子颜色 "#222222"
particles.shape.polygon.nb_slides number 原子的多边形边数 5
particles.shape.image.src path link
svg / png / gif / jpg 原子的图片可以使用自定义图片
particles.shape.image.width number (for aspect ratio) 图片宽度
particles.shape.image.height number (for aspect ratio) 图片高度
particles.opacity.value number (0 to 1) 不透明度 0.75
particles.opacity.random boolean 随机不透明度 true / false
particles.opacity.anim.enable boolean 渐变动画 true / false
particles.opacity.anim.speed number 渐变动画速度 3
particles.opacity.anim.opacity_min number (0 to 1) 渐变动画不透明度 0.25
particles.opacity.anim.sync boolean true / false
particles.size.value number 原子大小 20
particles.size.random boolean 原子大小随机 true / false
particles.size.anim.enable boolean 原子渐变 true / false
particles.size.anim.speed number 原子渐变速度 3
particles.size.anim.size_min number 0.25
particles.size.anim.sync boolean true / false
particles.line_linked.enable boolean 连接线 true / false
particles.line_linked.distance number 连接线距离 150
particles.line_linked.color HEX (string) 连接线颜色 #ffffff
particles.line_linked.opacity number (0 to 1) 连接线不透明度 0.5
particles.line_linked.width number 连接线的宽度 1.5
particles.move.enable boolean 原子移动 true / false
particles.move.speed number 原子移动速度 4
particles.move.direction string 原子移动方向
particles.move.random boolean 移动随机方向 true / false
particles.move.straight boolean 直接移动 true / false
particles.move.out_mode string (out of canvas) 是否移动出画布
particles.move.bounce boolean (between particles) 是否跳动移动
particles.move.attract.enable boolean 原子之间吸引 true / false
particles.move.attract.rotateX number 原子之间吸引X水平距离 3000
particles.move.attract.rotateY number y垂直距离 1500
interactivity.detect_on string 原子之间互动检测 "canvas", "window"
interactivity.events.onhover.enable boolean 悬停 true / false
interactivity.events.onhover.mode string array selection 悬停模式
interactivity.events.onclick.enable boolean 点击效果 true / false
interactivity.events.onclick.mode string array selection 点击效果模式
interactivity.events.resize boolean 互动事件调整 true / false
interactivity.events.modes.grab.distance number 原子互动抓取距离 100
interactivity.events.modes.grab.line_linked.opacity number (0 to 1) 原子互动抓取距离连线不透明度 0.75
interactivity.events.modes.bubble.distance number 原子抓取泡沫效果之间的距离 100
interactivity.events.modes.bubble.size number 原子抓取泡沫效果之间的大小 40
interactivity.events.modes.bubble.duration number 原子抓取泡沫效果之间的持续事件 (second) 0.4
interactivity.events.modes.repulse.distance number 击退效果距离 200
interactivity.events.modes.repulse.duration number 击退效果持续事件 (second) 1.2
interactivity.events.modes.push.particles_nb number 粒子推出的数量 4
interactivity.events.modes.push.particles_nb number 4
retina_detect boolean true / false
