网页粒子背景效果

摘要:分享一款用于网页背景粒子系统的JavaScript插件,支持鼠标控制的视差效果,适用于任何支持HTML5画布的浏览器。注意事项:v1.0.0以上版本支持js原生调用,不必依赖jquery。

分享一款用于网页背景粒子系统的JavaScript插件,支持而且还能和鼠标指针互动的视差效果,适用于任何支持HTML5画布的浏览器。

github地址:https://github.com/jnicol/particleground
演示dom:https://jnicol.github.io/particleground/


使用文法

引入文件:

<script src="https://jnicol.github.io/particleground/js/jquery.particleground.js"></script>

html:

<div id="particles"></div>

js:

particleground(document.body, {
dotColor: '#eee',
lineColor: '#ddd'
});

注意事项:v1.0.0以上版本支持js原生调用,不必依赖jquery。


参数

名称默认值描述
minSpeedX0.1

x轴最小速度

maxSpeedX0.7

x轴最大速度

minSpeedY0.1
maxSpeedY0.7
directionX‘center’可用值 ‘center’, ‘left’ 和’right’.
directionY‘center’可用值’center’, ‘up’ 和 ‘down’.
density10000确定生成多少料子
dotColor‘#666666’ 点的颜色
lineColor‘#666666’ 线的颜色
particleRadius7 粒子半径
Dot size 点的大小
lineWidth1 线的宽度
curvedLinesfalse线是否弯曲
proximity100两个点间多远开始连
parallaxtrue 视差效果
parallaxMultiplier5数量越低,视差效果更强
onInitfunction() {}初始时调用函数
onDestroyfunction() {}销毁时调用函数

ps:需要注意的是density这个显示粒子数量的参数,官方默认值是1e4也就是10的4次方10000,设定数值简易设定为10000左右的数值不要太大也不要太小。

数值越大显示的粒子数量越小

数值越小显示的粒子数量越多

如果设定成100或50浏览器基本上就打不开这个页面了直接崩溃卡死


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_12290