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

html5 7年前 (2017) 工具猫
4,143 0

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

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

Particleground这款插件的githubhttps://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浏览器基本上就打不开这个页面了直接崩溃卡死

名称 默认值 描述
minSpeedX 0.1
maxSpeedX 0.7
minSpeedY 0.1
maxSpeedY 0.7
directionX 'center' 可用值 'center', 'left' 和'right'.
directionY 'center' 可用值'center', 'up' 和 'down'.
density 10000 确定生成多少料子
dotColor '#666666'  点的颜色
lineColor '#666666'  线的颜色
particleRadius 7  粒子半径
Dot size  点的大小
lineWidth 1  线的宽度
curvedLines false 线是否弯曲
proximity 100 两个点间多远开始连
parallax true  视差效果
parallaxMultiplier 5 数量越低,视差效果更强
onInit function() {} 初始时调用函数
onDestroy function() {} 销毁时调用函数

 

版权声明:工具猫 发表于 2017-07-06 8:56:46。
转载请注明:一款背景跟随鼠标移动的力导向粒子背景插件 | 工具猫