还在犹豫做不做小程序_JS库之Particles.js中文开发

JS库之Particles.js中文开发手册及参数详解       因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错。今天凡科小编把Particles.js中文开发手册及particles.js参数分享给大家,需要的朋友参考下吧

因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个

官方github:

demo制作器,注意可能需要FQ

这个可以把你制作的demo导出

这个可以用来尝试配置不同效果

使用方法

加载particle.js并配置粒子:

<

 div id="particles-js" /div 
 script src="particles.js" /script 

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
 console.log('callback - particles.js config loaded');
});

particles.json就是主要的配置文件

注意一下文件顺序,不然会出现问题

实际demo

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title particles.js /title 
 link rel="stylesheet" href="style.css" rel="external nofollow" 
 /head 
 body 
 div id="particles-js" /div 
 /body 
 script src='particles.min.js' /script 这个玩意需要放在下面
 script src="index.js" /script 
 /html 

如有需要下载demo请到QQ群,黑色原子效果很科幻,还不错

根据css颜色和json配置文件,就打造属于自己的科幻效果

参数


svg / png / gif / jpg  原子的图片可以使用自定义图片 "assets/img/yop.svg" 
"assets/img/yop.png"
particles.opacity.anim.enable boolean            渐变动画 true / false
particles.opacity.anim.speed number            渐变动画速度
particles.opacity.anim.opacity_min number (0 to 1)      渐变动画不透明度 0.25
particles.move.direction string              原子移动方向 "none" 
"top" 
"top-right" 
"right" 
"bottom-right" 
"bottom" 
"bottom-left" 
"left" 
"top-left"
particles.move.random boolean              移动随机方向 true / false
particles.move.straight boolean              直接移动 true / false
interactivity.events.modes.grab.distance number        原子互动抓取距离
interactivity.events.modes.grab.line_linked.opacity number (0 to 1)        原子互动抓取距离连线不透明度 0.75
interactivity.events.modes.bubble.distance number       原子抓取泡沫效果之间的距离
interactivity.events.modes.bubble.size number      原子抓取泡沫效果之间的大小
interactivity.events.modes.bubble.duration number    原子抓取泡沫效果之间的持续事件
(second)
interactivity.events.modes.repulse.duration number      击退效果持续事件
(second)
interactivity.events.modes.push.particles_nb number        粒子推出的数量

总结

以上所述是小编给大家介绍的JS库之Particles.js中文开发手册及参数详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




扫描二维码分享到微信