一款背景跟随鼠标移动的力导向粒子背景插件

移动端的普及极大的推动了HTML5的发展，基于HTML5的背景效果也层出不穷，其中有一款背景跟随鼠标移动的力导向粒子背景插件很是酷炫，这里分享给大家。

本文的主角就是Particleground，它是一款时髦的jquery粒子系统背景插件，PC端可通过鼠标控制视差效果，而移动端可用重力感应控制，Particleground可以运行在任何支持html5 canvas的浏览器上。

Particleground这款插件的github ：https://github.com/jnicol/particleground

使用方法

页面调用jquery和particleground.js

<script type='text/javascript' src='jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='jquery.particleground.min.js'></script>

html

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

js初始化插件，调用对应的id

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

选项

可以通过设置选项选择对象的构造函数。

下面是一个示例的设置粒子系统点和线的颜色:

$('#your-element').particleground({
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

需要注意的是density这个显示粒子数量的参数
官方默认值是1e4也就是10的4次方10000
设定数值简易设定为10000左右的数值不要太大也不要太小
数值越大显示的粒子数量越小
数值越小显示的粒子数量越多
如果设定成100或50浏览器基本上就打不开这个页面了直接崩溃卡死