JS创建粒子背景插件particles.js

来源：易助科技网浏览量：14收藏

简介

particles.js是一个轻量级的创建粒子背景的 JS 库，用来在网页上创建颗粒效果。

使用

1. 引入 particlesjs 文件

在HTML中包含缩小的JS（就在结束正文标记之前）。

<body>
  …
  <script src="path/to/particles.min.js"></script>
</body>

2. HTML

将画布元素添加到标记中（它应该是最后一个元素）

<body>
  …
  <canvas class="background"></canvas>
  <script src="path/to/particles.min.js"></script>
</body>

[CSS]
<style>
html,
body {
  margin: 0;
  padding: 0;
}

.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}
</style>

3. 调用

window.onload = function() {
  Particles.init({
    selector: '.background'
  });
};

4. 配置

Option	Type	Default	Description
selector	string	-	Required: The CSS selector of your canvas element
maxParticles	integer	100	Optional: Maximum amount of particles
sizeVariations	integer	3	Optional: Amount of size variations
speed	integer	0.5	Optional: Movement speed of the particles
color	string or string[]	#000000	Optional: Color(s) of the particles and connecting lines
minDistance	integer	120	Optional: Distance in px for connecting lines
connectParticles	boolean	FALSE	Optional: true/false if connecting lines should be drawn or not
responsive	array	null	Optional: Array of objects containing breakpoints and options

建站资源下载详情

为您免费提供多种建站资源下载，包括网站模板下载、前端插件下载和字体下载！您只需注册为会员即可任意下载！

JS创建粒子背景插件particles.js

简介

使用

1. 引入 particlesjs 文件

2. HTML

3. 调用

4. 配置

相关链接