Particleground 粒子系统动态背景插件

Question

Particleground 是一个粒子系统插件，能够根据鼠标的移动，生成背景的动态，Particleground 包括一个可选的视差效应控制鼠标在桌面设备和移动设备上的陀螺仪，它适用于任何浏览器支持 HTML5 画布。

使用方法

1、下载 Particleground 插件，你可以通过 Particleground 的 Github地址 下载得到 Particleground 的源文件，或者通过问说网开源项目 CDN 加速，不用下载Particleground 即可使用。

2、在页面中引入插件文件和 jQuery 文件

<script src='jquery.min.js'></script>
<script src='jquery.particleground.js'></script>

3、编写 HTML 代码用于显示粒子背景的容器，下面是官方示例的 HTML 代码

<div id="particles">
  <div class="intro">
    <h1>Particleground</h1>
    <p>A jQuery plugin for snazzy background particle systems</p>
  </div>
</div>

4、初始化插件

particleground(document.getElementById('#particles');

或者你可以通过 jQuey 选择器，初始化插件

$('#particles').particleground();

可选参数

可以通过设置选项选择对象的构造函数，下面是一个示例的设置粒子系统点和线的颜色：

$('#particles').particleground({
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

下面是一个完整的列表的选项和参数的默认值：

• minSpeedX:0.1
• maxSpeedX:0.7
• minSpeedY:0.1
• maxSpeedY:0.7
• directionX:'center',Can be one of 'center', 'left' or 'right'. 'center' means that the dots will bounce off the edges of the canvas.
  directionY:'center',Can be one of 'center', 'up' or 'down'. 'center' means that the dots will bounce off the edges of the canvas.
• density:10000,Determines how many particles will be generated: one particle every n pixels.
• dotColor:'#666666'
• lineColor:'#666666'
• particleRadius:7,Dot size
• lineWidth:1
• curvedLines:false
• proximity:100,How close two dots need to be, in pixels, before they join.
• parallax:true
• parallaxMultiplier:5,The lower the number, the more extreme the parallax effect wil be.
• onInit:function() {},A callback executed after Particleground initializes.
• onDestroy:function() {},A callback executed after Particleground is destroyed.

方法函数

Particleground 提供了一些公共的方法，可以让你动态控制生成的粒子效果，下面是方法函数调用示例

var pg = particleground(document.getElementById('your-element');
pg.pause();

使用 jQuery 选择器调用

$('#your-element').particlegound('pause');

下面是完整的方法函数列表

• pause():Pauses the particle system.
• start():Restarts the particle system if you previously paused it.
• destroy():Removes the plugin from your element.

相关链接

• Github地址：https://github.com/jnicol/particleground
• 官网示例地址：http://jnicol.github.io/particleground/
• 示例地址：https://www.wenjiangs.com/wp-content/uploads/2019/06/particleground/
• 下载地址：https://github.com/jnicol/particleground/archive/master.zip
• 插件灵感来自：http://requestlab.fr/ 和 http://disruptivebydesign.com/
• 本地下载：https://www.wenjiangs.com/wp-content/uploads/2019/06/particleground-master.zip