Rumah > Artikel > hujung hadapan web > JS库之Particles.js中文开发手册
JS库之Particles.js中文开发手册
- 巴扎黑asal
- 2017-09-15 09:18:482401semak imbas
因为自己需要做产品，所以一个好的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
<p id="particles-js"></p> <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> <p id="particles-js"></p> </body> <script src='particles.min.js'></script> 这个玩意需要放在下面 <script src="index.js"></script> </html>
如有需要下载demo请到QQ群，黑色原子效果很科幻，还不错
根据css颜色和json配置文件，就打造属于自己的科幻效果
参数
| 键值 | 参数选项/ 说明 | 实例 |
|---|---|---|
<span style="color:#111111;font-family:NSimsun">particles.number.value</span> |
number 数量 | <span style="color:#111111;font-family:NSimsun">40</span> |
<span style="color:#111111;font-family:NSimsun">particles.number.density.enable</span> |
boolean |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.number.density.value_area</span> |
number 区域散布密度大小 | <span style="color:#111111;font-family:NSimsun">800</span> |
<span style="color:#111111;font-family:NSimsun">particles.color.value</span> |
HEX (string) 原子的颜色 |
<span style="color:#111111;font-family:NSimsun">"#b61924"</span> <span style="color:#111111;font-family:NSimsun">{r:182, g:25, b:36}</span> <span style="color:#111111;font-family:NSimsun">{h:356, s:76, l:41}</span> <span style="color:#111111;font-family:NSimsun">["#b61924", "#333333", "999999"]</span> <span style="color:#111111;font-family:NSimsun">"random"</span>
|
<span style="color:#111111;font-family:NSimsun">particles.shape.type</span> |
string array selection 原子的形状 |
<span style="color:#111111;font-family:NSimsun">"circle"</span> <span style="color:#111111;font-family:NSimsun">"edge"</span> <span style="color:#111111;font-family:NSimsun">"triangle"</span> <span style="color:#111111;font-family:NSimsun">"polygon"</span> <span style="color:#111111;font-family:NSimsun">"star"</span> <span style="color:#111111;font-family:NSimsun">"image"</span> <span style="color:#111111;font-family:NSimsun">["circle", "triangle", "image"]</span>
|
<span style="color:#111111;font-family:NSimsun">particles.shape.stroke.width</span> |
number 原理的宽度 | <span style="color:#111111;font-family:NSimsun">2</span> |
<span style="color:#111111;font-family:NSimsun">particles.shape.stroke.color</span> |
HEX (string) 原子颜色 | <span style="color:#111111;font-family:NSimsun">"#222222"</span> |
<span style="color:#111111;font-family:NSimsun">particles.shape.polygon.nb_slides</span> |
number 原子的多边形边数 | <span style="color:#111111;font-family:NSimsun">5</span> |
<span style="color:#111111;font-family:NSimsun">particles.shape.image.src</span> |
path link svg / png / gif / jpg 原子的图片可以使用自定义图片 |
<span style="color:#111111;font-family:NSimsun">"assets/img/yop.svg"</span> <span style="color:#111111;font-family:NSimsun">"http://mywebsite.com/assets/img/yop.png"</span>
|
<span style="color:#111111;font-family:NSimsun">particles.shape.image.width</span> |
number (for aspect ratio) 图片宽度 |
<span style="color:#111111;font-family:NSimsun">100</span> |
<span style="color:#111111;font-family:NSimsun">particles.shape.image.height</span> |
number (for aspect ratio) 图片高度 |
<span style="color:#111111;font-family:NSimsun">100</span> |
<span style="color:#111111;font-family:NSimsun">particles.opacity.value</span> |
number (0 to 1) 不透明度 | <span style="color:#111111;font-family:NSimsun">0.75</span> |
<span style="color:#111111;font-family:NSimsun">particles.opacity.random</span> |
boolean 随机不透明度 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.enable</span> |
boolean 渐变动画 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.speed</span> |
number 渐变动画速度 | <span style="color:#111111;font-family:NSimsun">3</span> |
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.opacity_min</span> |
number (0 to 1) 渐变动画不透明度 | <span style="color:#111111;font-family:NSimsun">0.25</span> |
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.sync</span> |
boolean |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.size.value</span> |
number 原子大小 | <span style="color:#111111;font-family:NSimsun">20</span> |
<span style="color:#111111;font-family:NSimsun">particles.size.random</span> |
boolean 原子大小随机 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.size.anim.enable</span> |
boolean 原子渐变 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.size.anim.speed</span> |
number 原子渐变速度 | <span style="color:#111111;font-family:NSimsun">3</span> |
<span style="color:#111111;font-family:NSimsun">particles.size.anim.size_min</span> |
number | <span style="color:#111111;font-family:NSimsun">0.25</span> |
<span style="color:#111111;font-family:NSimsun">particles.size.anim.sync</span> |
boolean |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.line_linked.enable</span> |
boolean 连接线 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.line_linked.distance</span> |
number 连接线距离 | <span style="color:#111111;font-family:NSimsun">150</span> |
<span style="color:#111111;font-family:NSimsun">particles.line_linked.color</span> |
HEX (string) 连接线颜色 | <span style="color:#111111;font-family:NSimsun">#ffffff</span> |
<span style="color:#111111;font-family:NSimsun">particles.line_linked.opacity</span> |
number (0 to 1) 连接线不透明度 | <span style="color:#111111;font-family:NSimsun">0.5</span> |
<span style="color:#111111;font-family:NSimsun">particles.line_linked.width</span> |
number 连接线的宽度 | <span style="color:#111111;font-family:NSimsun">1.5</span> |
<span style="color:#111111;font-family:NSimsun">particles.move.enable</span> |
boolean 原子移动 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.speed</span> |
number 原子移动速度 | <span style="color:#111111;font-family:NSimsun">4</span> |
<span style="color:#111111;font-family:NSimsun">particles.move.direction</span> |
string 原子移动方向 |
<span style="color:#111111;font-family:NSimsun">"none"</span> <span style="color:#111111;font-family:NSimsun">"top"</span> <span style="color:#111111;font-family:NSimsun">"top-right"</span> <span style="color:#111111;font-family:NSimsun">"right"</span> <span style="color:#111111;font-family:NSimsun">"bottom-right"</span> <span style="color:#111111;font-family:NSimsun">"bottom"</span> <span style="color:#111111;font-family:NSimsun">"bottom-left"</span> <span style="color:#111111;font-family:NSimsun">"left"</span> <span style="color:#111111;font-family:NSimsun">"top-left"</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.random</span> |
boolean 移动随机方向 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.straight</span> |
boolean 直接移动 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.out_mode</span> |
string (out of canvas) 是否移动出画布 |
<span style="color:#111111;font-family:NSimsun">"out"</span> <span style="color:#111111;font-family:NSimsun">"bounce"</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.bounce</span> |
boolean (between particles) 是否跳动移动 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.attract.enable</span> |
boolean 原子之间吸引 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.attract.rotateX</span> |
number 原子之间吸引X水平距离 | <span style="color:#111111;font-family:NSimsun">3000</span> |
<span style="color:#111111;font-family:NSimsun">particles.move.attract.rotateY</span> |
number y垂直距离 | <span style="color:#111111;font-family:NSimsun">1500</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.detect_on</span> |
string 原子之间互动检测 | <span style="color:#111111;font-family:NSimsun">"canvas", "window"</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.enable</span> |
boolean 悬停 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.mode</span> |
string 悬停模式 |
<span style="color:#111111;font-family:NSimsun">"grab"</span> 抓取临近的<span style="color:#111111;font-family:NSimsun">"bubble"</span> 泡沫球效果<span style="color:#111111;font-family:NSimsun">"repulse"</span> 击退效果<span style="color:#111111;font-family:NSimsun">["grab", "bubble"]</span>
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.onclick.enable</span> |
boolean 点击效果 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.onclick.mode</span> |
string 点击效果模式 |
<span style="color:#111111;font-family:NSimsun">"push"</span> <span style="color:#111111;font-family:NSimsun">"remove"</span> <span style="color:#111111;font-family:NSimsun">"bubble"</span> <span style="color:#111111;font-family:NSimsun">"repulse"</span> <span style="color:#111111;font-family:NSimsun">["push", "repulse"]</span>
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.resize</span> |
boolean 互动事件调整 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.grab.distance</span> |
number 原子互动抓取距离 | <span style="color:#111111;font-family:NSimsun">100</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.grab.line_linked.opacity</span> |
number (0 to 1) 原子互动抓取距离连线不透明度 | <span style="color:#111111;font-family:NSimsun">0.75</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.distance</span> |
number 原子抓取泡沫效果之间的距离 | <span style="color:#111111;font-family:NSimsun">100</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.size</span> |
number 原子抓取泡沫效果之间的大小 | <span style="color:#111111;font-family:NSimsun">40</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.duration</span> |
number 原子抓取泡沫效果之间的持续事件 (second) |
<span style="color:#111111;font-family:NSimsun">0.4</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.repulse.distance</span> |
number 击退效果距离 | <span style="color:#111111;font-family:NSimsun">200</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.repulse.duration</span> |
number 击退效果持续事件 (second) |
<span style="color:#111111;font-family:NSimsun">1.2</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.push.particles_nb</span> |
number 粒子推出的数量 | <span style="color:#111111;font-family:NSimsun">4</span> |
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.push.particles_nb</span> |
number | <span style="color:#111111;font-family:NSimsun">4</span> |
<span style="color:#111111;font-family:NSimsun">retina_detect</span> |
boolean |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
Atas ialah kandungan terperinci JS库之Particles.js中文开发手册. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用Particles.js制作出仿知乎超炫粒子动态背景效果代码介绍Artikel seterusnya：JavaScript计算出字符串所占字节数