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() {} | 销毁时调用函数 |
在线演示及下载
相关推荐
-
markline.js——轻量级canvas绘制标记线的库 插件应用
2018-1-9
-
Draggabilly中文文档 插件应用
2017-12-11
-
省市区三级菜单联动插件 插件应用
2018-1-1
-
FullPage.js全屏插件文档及使用方法 插件应用
2017-6-27
-
jQuery Jcrop 图像裁剪 插件应用
2017-6-23
-
ScrollReveal-元素随页面滚动产生动画的js插件 插件应用
2017-6-3
-
图像延迟加载库Echo.js 插件应用
2017-6-23
-
移动端日期选择组件 插件应用
2017-6-23
-
jQuery全屏滚动插件-DD Full Screen Slider 插件应用
2017-12-25
-
liMarquee无缝滚动Jquery插件 插件应用
2017-6-23