particles.js配置参数说明

参考文章:https://www.cnblogs.com/wangyihong/p/8618305.html

配置说明:

键值参数选项/ 说明实例
particles.number.valuenumber   粒子数量40
particles.number.density.enableboolean  是否配置粒子密度true / false
particles.number.density.value_areanumber   粒子区域散布密度大小800
particles.color.value

HEX (string) 
RGB (object) 
HSL (object) 
array selection (HEX) 
random (string)

粒子颜色

"#b61924" 
{r:182, g:25, b:36} 
{h:356, s:76, l:41} 
["#b61924", "#333333", "999999"] 
"random"
particles.shape.typestring 
array selection 粒子的形状
"circle" 
"edge" 
"triangle" 
"polygon" 
"star" 
"image" 
["circle", "triangle", "image"]
particles.shape.stroke.widthnumber      粒子的宽度2
particles.shape.stroke.colorHEX (string)  粒子颜色"#222222"
particles.shape.polygon.nb_slidesnumber       粒子的多边形边数5
particles.shape.image.srcpath link 
svg / png / gif / jpg  粒子的图片,可以使用自定义图片
"assets/img/yop.svg" 
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.widthnumber 
(for aspect ratio)    图片宽度
100
particles.shape.image.heightnumber 
(for aspect ratio)    图片高度
100
particles.opacity.valuenumber (0 to 1)   粒子不透明度0.75
particles.opacity.randomboolean     随机不透明度true / false
particles.opacity.anim.enableboolean            渐变动画true / false
particles.opacity.anim.speednumber            渐变动画速度3
particles.opacity.anim.opacity_minnumber (0 to 1)       渐变动画不透明度0.25
particles.opacity.anim.syncboolean true / false
particles.size.valuenumber       粒子大小20
particles.size.randomboolean       粒子大小随机true / false
particles.size.anim.enableboolean      粒子渐变true / false
particles.size.anim.speednumber     粒子渐变速度3
particles.size.anim.size_minnumber0.25
particles.size.anim.syncbooleantrue / false
particles.line_linked.enableboolean       是否使用连接线true / false
particles.line_linked.distancenumber       连接线距离150
particles.line_linked.colorHEX (string)   连接线颜色#ffffff
particles.line_linked.opacitynumber (0 to 1)    连接线不透明度0.5
particles.line_linked.widthnumber     连接线的宽度1.5
particles.move.enableboolean     粒子是否移动true / false
particles.move.speednumber     粒子移动速度4
particles.move.directionstring              粒子移动方向"none" 
"top" 
"top-right" 
"right" 
"bottom-right" 
"bottom" 
"bottom-left" 
"left" 
"top-left"
particles.move.randomboolean             移动方向是否随机true / false
particles.move.straightboolean              true / false
particles.move.out_mode

string  
(out of canvas)        

是否移动出画布,不移动出画布时,将会在画布上撞边反弹

"out" 
"bounce"
particles.move.bounce

boolean 
(between particles)  

是否跳动移动

true / false
particles.move.attract.enableboolean  粒子之间吸引true / false
particles.move.attract.rotateXnumber   粒子之间吸引水平距离3000
particles.move.attract.rotateYnumber  粒子之间吸引垂直距离1500
interactivity.detect_onstring        粒子之间互动探测"canvas", "window"
interactivity.events.onhover.enableboolean    鼠标悬停效果true / false
interactivity.events.onhover.mode

string 
array selection

悬停样式

"grab"     鼠标和临近的粒子连线
"bubble"  和鼠标临近的粒子放大
"repulse"  和鼠标保持距离
["grab", "bubble"]
interactivity.events.onclick.enableboolean  鼠标点击效果true / false
interactivity.events.onclick.mode

string 
array selection

鼠标点击效果模式

"push" 
"remove" 
"bubble" 
"repulse" 
["push", "repulse"]
interactivity.events.resizeboolean         互动事件调整true / false
interactivity.events.modes.grab.distancenumber        粒子互动抓取距离100
interactivity.events.modes.grab.line_linked.opacitynumber (0 to 1)       粒子互动抓取距离连线不透明度0.75
interactivity.events.modes.bubble.distancenumber       粒子抓取泡沫效果之间的距离100
interactivity.events.modes.bubble.sizenumber     粒子抓取泡沫效果之间的大小40
interactivity.events.modes.bubble.durationnumber    粒子抓取泡沫效果之间的持续时间
(second)
0.4
interactivity.events.modes.repulse.distancenumber       击退效果距离200
interactivity.events.modes.repulse.durationnumber      击退效果持续事件
(second)
1.2
interactivity.events.modes.push.particles_nbnumber         粒子推出的数量4
interactivity.events.modes.remove.particles_nbnumber4
retina_detectbooleantrue / false
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值