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

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

来源:易助科技网浏览量:22收藏

简介


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


JS创建粒子背景插件particles.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.  配置


OptionTypeDefaultDescription
selectorstring-Required: The CSS selector of your canvas element
maxParticlesinteger100Optional: Maximum amount of particles
sizeVariationsinteger3Optional: Amount of size variations
speedinteger0.5Optional: Movement speed of the particles
colorstring or
 string[]
#000000Optional: Color(s) of the particles and connecting lines
minDistanceinteger120Optional: Distance in px for connecting lines
connectParticlesbooleanFALSEOptional: true/false if connecting lines should be drawn or not
responsivearraynullOptional: Array of objects containing breakpoints and options



相关链接


官网地址 :  https://marcbruederlin.github.io/particles.js/

GitHub 地址 :https://gitcode.net/mirrors/VincentGarreau/particles.js?utm_source=csdn_github_accelerator

效果演示 :  http://www.tstudy.com.cn/bk.html