Particleground粒子背景插件

插件应用

浏览数:3,236

2017-12-12

简介

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

使用文法

引入文件



html

js

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

//可以根据下面表格中参数说明设定相应参数
$('#particles').particleground({
dotColor: '#ff0000',
lineColor: '#ff0000'
});

ps:需要注意的是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() {} 销毁时调用函数

在线演示及下载

插件地址:http://www.jqhtml.com/4835.html