Particleground粒子背景插件
简介
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() {} | 销毁时调用函数 |
在线演示及下载
相关推荐
-
轴动效果插件,类似Github404页面 插件应用
2018-10-31
-
选择下拉插件-Dropdown.js 插件应用
2017-12-25
-
Slick.js幻灯片使用方法 插件应用
2017-6-3
-
jQuery响应式图片画廊插件S Gallery 插件应用
2017-12-12
-
kissui.scrollanim页面滚动动画库插件 插件应用
2017-5-18
-
Scrollify – jQuery全屏滚动插件 插件应用
2017-12-12
-
jQuery Transit 过渡效果插件 插件应用
2017-5-17
-
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择? 插件应用
2018-10-6
-
Slideout.js菜单导航插件 插件应用
2017-12-11
-
简单的jQuery无缝向上滚动效果 插件应用
2017-12-12