超炫背景粒子插件particlesjs
超炫背景粒子插件particlesjs
基于html5 canvas的轻量级炫酷js粒子动画库插件。该js粒子动画库插件可以设置粒子的形状、旋转、分布、颜色等属性，还可以动态添加粒子，效果非常酷。 IE9+
particlesjs-GitHub
在线Demo预览
CND
安装
npm install particlesjs --save
使用
<!-- HTML标签 -->
<body>
<canvas class="background"></canvas>
</body>
<!-- 设置样式 -->
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
初始哈粒子效果：
import Particles from "particlesjs";
mounted() {
this.$nextTick(() => {
Particles.init({
selector: ".background"
});
});
}
Options 选项
| Option | Type | Default | Description |
|---|---|---|---|
selector |
string | - | *【必填】 画布元素的CSS选择器 |
maxParticles |
integer | 100 |
粒子的最大数量 |
sizeVariations |
integer | 3 |
尺寸变化量 |
speed |
integer | 0.5 |
粒子的移动速度 |
color |
string or string[] | #000000 |
粒子和连接线的颜色 |
minDistance |
integer | 120 |
连接线的距离，单位为“px” |
connectParticles |
boolean | false |
是否应绘制连接线 |
responsive |
array | null |
包含断点和选项的对象数组 |
公共方法
| 方法 | 描述 |
|---|---|
pauseAnimation |
暂停/停止粒子动画 |
resumeAnimation |
继续粒子动画 |
destroy |
销毁插件 |
// 暂停动画
function pause() {
Particles.pauseAnimation();
}
// 继续动画
function resume() {
Particles.resumeAnimation()
}
// 销毁
Particles.destory()
