粒子背景特效Particleground.js插件使用解析
作者:cywcd 发布:2018-10-11 18:33 字符数:1067 分类:javascript 阅读: 5,009 次 评论关闭
Particleground简介:
Particleground是一个JavaScript插件,用于时髦的后台粒子系统。包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果。在支持HTML5画布的浏览器中工作。
初始化:
particleground(document.getElementById('your-element');
注意事项:
v1.0.0以上版本支持js原生调用,不必依赖jquery。
具体使用方法:
1)引入文件
2)html
3)js调用
// 原生js(要求v1.0.0以上版本): particleground(document.getElementById('particles'); //可以根据下面表格中参数说明设定相应参数 particleground(document.getElementById('particles'), { dotColor: '#ff0000', lineColor: '#ff0000' }); // jQuery: $('#particles').particleground(); //可以根据下面表格中参数说明设定相应参数 $('#particles').particleground({ dotColor: '#ff0000', lineColor: '#ff0000' });
参数:
名称 | 默认值 | 描述 |
---|---|---|
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() {} | 销毁时调用函数 |
项目地址:
https://github.com/jnicol/particleground
参考:
http://www.jq22.com/jquery-info566
http://www.jqhtml.com/8478.html