JS库之Particles.js中文开发手册

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

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

官方github：https://github.com/VincentGarreau/particles.js/

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

https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出

http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果

使用方法

加载particle.js并配置粒子：

index.html

app.js

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

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

实际demo

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

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

参数

键值	参数选项/ 说明	实例
particles.number.value	number 数量	40
particles.number.density.enable	boolean	true / false
particles.number.density.value_area	number 区域散布密度大小	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.type	string array selection 原子的形状	"circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"]
particles.shape.stroke.width	number 原理的宽度	2
particles.shape.stroke.color	HEX (string) 原子颜色	"#222222"
particles.shape.polygon.nb_slides	number 原子的多边形边数	5
particles.shape.image.src	path link svg / png / gif / jpg 原子的图片可以使用自定义图片	"assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width	number (for aspect ratio) 图片宽度	100
particles.shape.image.height	number (for aspect ratio) 图片高度	100
particles.opacity.value	number (0 to 1) 不透明度	0.75
particles.opacity.random	boolean 随机不透明度	true / false
particles.opacity.anim.enable	boolean 渐变动画	true / false
particles.opacity.anim.speed	number 渐变动画速度	3
particles.opacity.anim.opacity_min	number (0 to 1) 渐变动画不透明度	0.25
particles.opacity.anim.sync	boolean	true / false
particles.size.value	number 原子大小	20
particles.size.random	boolean 原子大小随机	true / false
particles.size.anim.enable	boolean 原子渐变	true / false
particles.size.anim.speed	number 原子渐变速度	3
particles.size.anim.size_min	number	0.25
particles.size.anim.sync	boolean	true / false
particles.line_linked.enable	boolean 连接线	true / false
particles.line_linked.distance	number 连接线距离	150
particles.line_linked.color	HEX (string) 连接线颜色	#ffffff
particles.line_linked.opacity	number (0 to 1) 连接线不透明度	0.5
particles.line_linked.width	number 连接线的宽度	1.5
particles.move.enable	boolean 原子移动	true / false
particles.move.speed	number 原子移动速度	4
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
particles.move.out_mode	string (out of canvas) 是否移动出画布	"out" "bounce"
particles.move.bounce	boolean (between particles) 是否跳动移动	true / false
particles.move.attract.enable	boolean 原子之间吸引	true / false
particles.move.attract.rotateX	number 原子之间吸引X水平距离	3000
particles.move.attract.rotateY	number y垂直距离	1500
interactivity.detect_on	string 原子之间互动检测	"canvas", "window"
interactivity.events.onhover.enable	boolean 悬停	true / false
interactivity.events.onhover.mode	string array selection 悬停模式	"grab" 抓取临近的 "bubble" 泡沫球效果 "repulse" 击退效果 ["grab", "bubble"]
interactivity.events.onclick.enable	boolean 点击效果	< 上一篇 解决引入JavaScript时alert弹框显示中文乱码问题详解 下一篇 > 总结coffeescript使用的方式 人气教程排行 213次 1 vue2 设置router-view默认路径的实例 213次 2 Vue-路由导航菜单栏的高亮设置方法 213次 3 基于Axios 常用的请求方法别名(详解) 213次 4 JavaScript+canvas实现七色板效果实例 212次 5 实现vuex的初始化方法 212次 6 jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决 212次 7 Array.slice()与Array.splice()的返回值类型_基础知识 212次 8 微信小程序使用swiper组件实现层叠轮播图 212次 9 element-ui 限制日期选择的方法(datepicker) 212次 10 vue-baidu-map 进入页面自动定位的解决方案(推荐) 212次 11 JS实现元素上下左右移动效果 212次 12 node.js中的emitter.on方法使用说明 211次 13 在js中如何实现图片左右滑动 211次 14 layui button 按钮弹出提示窗口,确定才进行的方法 211次 15 深入理解Vue生命周期、手动挂载及挂载子组件 211次 16 JS 使用for循环遍历子节点查找元素 210次 17 bootstrap如何设置表单必填 210次 18 bootstrap4兼容哪些浏览器 210次 19 jQuery实现追加数组并去重功能 210次 20 jQuery实现的在线答题功能_jquery 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！ 登录   记住我的登录 忘记密码？ 登录 我已阅读用户协议及版权声明 注册