particles.js配置参数说明

待我称王封你为后i 2023-12-16 00:47 13阅读 0赞

参考文章：[https://www.cnblogs.com/wangyihong/p/8618305.html][https_www.cnblogs.com_wangyihong_p_8618305.html]

配置说明：

<table> 
 <thead> 
 <tr> 
 <th>键值</th> 
 <th>参数选项/ 说明</th> 
 <th>实例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><code>particles.number.value</code></td> 
 <td>number&nbsp; &nbsp;粒子数量</td> 
 <td><code>40</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.number.density.enable</code></td> 
 <td>boolean&nbsp; 是否配置粒子密度</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.number.density.value_area</code></td> 
 <td>number&nbsp; &nbsp;粒子区域散布密度大小</td> 
 <td><code>800</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.color.value</code></td> 
 <td> HEX (string)&nbsp; RGB (object)&nbsp; HSL (object)&nbsp; array selection (HEX)&nbsp; random (string) 粒子颜色 </td> 
 <td><code>"#b61924"</code>&nbsp; <code>{r:182, g:25, b:36}</code>&nbsp; <code>{h:356, s:76, l:41}</code>&nbsp; <code>["#b61924", "#333333", "999999"]</code>&nbsp; <code>"random"</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.shape.type</code></td> 
 <td>string&nbsp; array selection 粒子的形状</td> 
 <td><code>"circle"</code>&nbsp; <code>"edge"</code>&nbsp; <code>"triangle"</code>&nbsp; <code>"polygon"</code>&nbsp; <code>"star"</code>&nbsp; <code>"image"</code>&nbsp; <code>["circle", "triangle", "image"]</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.shape.stroke.width</code></td> 
 <td>number &nbsp; &nbsp; &nbsp;粒子的宽度</td> 
 <td><code>2</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.shape.stroke.color</code></td> 
 <td>HEX (string) &nbsp;粒子颜色</td> 
 <td><code>"#222222"</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.shape.polygon.nb_slides</code></td> 
 <td>number &nbsp; &nbsp; &nbsp; 粒子的多边形边数</td> 
 <td><code>5</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.shape.image.src</code></td> 
 <td>path link&nbsp; svg / png / gif / jpg &nbsp;粒子的图片，可以使用自定义图片</td> 
 <td><code>"assets/img/yop.svg"</code>&nbsp; <code>"http://mywebsite.com/assets/img/yop.png"</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.shape.image.width</code></td> 
 <td>number&nbsp; (for aspect ratio) &nbsp; &nbsp;图片宽度</td> 
 <td><code>100</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.shape.image.height</code></td> 
 <td>number&nbsp; (for aspect ratio)&nbsp; &nbsp; 图片高度</td> 
 <td><code>100</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.opacity.value</code></td> 
 <td>number (0 to 1) &nbsp; 粒子不透明度</td> 
 <td><code>0.75</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.opacity.random</code></td> 
 <td>boolean &nbsp; &nbsp; 随机不透明度</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.opacity.anim.enable</code></td> 
 <td>boolean &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;渐变动画</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.opacity.anim.speed</code></td> 
 <td>number &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;渐变动画速度</td> 
 <td><code>3</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.opacity.anim.opacity_min</code></td> 
 <td>number (0 to 1) &nbsp; &nbsp; &nbsp;&nbsp;渐变动画不透明度</td> 
 <td><code>0.25</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.opacity.anim.sync</code></td> 
 <td>boolean&nbsp;</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.size.value</code></td> 
 <td>number &nbsp; &nbsp; &nbsp; 粒子大小</td> 
 <td><code>20</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.size.random</code></td> 
 <td>boolean &nbsp; &nbsp; &nbsp; 粒子大小随机</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.size.anim.enable</code></td> 
 <td>boolean &nbsp; &nbsp; &nbsp;粒子渐变</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.size.anim.speed</code></td> 
 <td>number &nbsp; &nbsp;&nbsp;粒子渐变速度</td> 
 <td><code>3</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.size.anim.size_min</code></td> 
 <td>number</td> 
 <td><code>0.25</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.size.anim.sync</code></td> 
 <td>boolean</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.line_linked.enable</code></td> 
 <td>boolean&nbsp; &nbsp; &nbsp; &nbsp;是否使用连接线</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.line_linked.distance</code></td> 
 <td>number &nbsp; &nbsp; &nbsp;&nbsp;连接线距离</td> 
 <td><code>150</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.line_linked.color</code></td> 
 <td>HEX (string) &nbsp;&nbsp;连接线颜色</td> 
 <td><code>#ffffff</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.line_linked.opacity</code></td> 
 <td>number (0 to 1) &nbsp; &nbsp;连接线不透明度</td> 
 <td><code>0.5</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.line_linked.width</code></td> 
 <td>number &nbsp; &nbsp;&nbsp;连接线的宽度</td> 
 <td><code>1.5</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.enable</code></td> 
 <td>boolean &nbsp; &nbsp; 粒子是否移动</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.speed</code></td> 
 <td>number &nbsp; &nbsp; 粒子移动速度</td> 
 <td><code>4</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.direction</code></td> 
 <td>string &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;粒子移动方向</td> 
 <td><code>"none"</code>&nbsp; <code>"top"</code>&nbsp; <code>"top-right"</code>&nbsp; <code>"right"</code>&nbsp; <code>"bottom-right"</code>&nbsp; <code>"bottom"</code>&nbsp; <code>"bottom-left"</code>&nbsp; <code>"left"</code>&nbsp; <code>"top-left"</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.random</code></td> 
 <td>boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;移动方向是否随机</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.straight</code></td> 
 <td>boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.out_mode</code></td> 
 <td> string &nbsp; (out of canvas) &nbsp; &nbsp; &nbsp; &nbsp; 是否移动出画布，不移动出画布时，将会在画布上撞边反弹 </td> 
 <td><code>"out"</code>&nbsp; <code>"bounce"</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.bounce</code></td> 
 <td> boolean&nbsp; (between particles) &nbsp; 是否跳动移动 </td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.attract.enable</code></td> 
 <td>boolean&nbsp; 粒子之间吸引</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.attract.rotateX</code></td> 
 <td>number &nbsp;&nbsp;粒子之间吸引水平距离</td> 
 <td><code>3000</code></td> 
 </tr> 
 <tr> 
 <td><code>particles.move.attract.rotateY</code></td> 
 <td>number &nbsp;粒子之间吸引垂直距离</td> 
 <td><code>1500</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.detect_on</code></td> 
 <td>string &nbsp; &nbsp; &nbsp; &nbsp;粒子之间互动探测</td> 
 <td><code>"canvas", "window"</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.onhover.enable</code></td> 
 <td>boolean&nbsp; &nbsp; 鼠标悬停效果</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.onhover.mode</code></td> 
 <td> string&nbsp; array selection 悬停样式 </td> 
 <td><code>"grab"</code>&nbsp; &nbsp; &nbsp;鼠标和临近的粒子连线 <code>"bubble"</code>&nbsp; 和鼠标临近的粒子放大 <code>"repulse"</code>&nbsp; 和鼠标保持距离 <code>["grab", "bubble"]</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.onclick.enable</code></td> 
 <td>boolean&nbsp; 鼠标点击效果</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.onclick.mode</code></td> 
 <td> string&nbsp; array selection 鼠标点击效果模式 </td> 
 <td><code>"push"</code>&nbsp; <code>"remove"</code>&nbsp; <code>"bubble"</code>&nbsp; <code>"repulse"</code>&nbsp; <code>["push", "repulse"]</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.resize</code></td> 
 <td>boolean &nbsp; &nbsp; &nbsp; &nbsp; 互动事件调整</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.grab.distance</code></td> 
 <td>number &nbsp; &nbsp; &nbsp; &nbsp;粒子互动抓取距离</td> 
 <td><code>100</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.grab.line_linked.opacity</code></td> 
 <td>number (0 to 1) &nbsp; &nbsp; &nbsp; 粒子互动抓取距离连线不透明度</td> 
 <td><code>0.75</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.bubble.distance</code></td> 
 <td>number &nbsp; &nbsp; &nbsp; 粒子抓取泡沫效果之间的距离</td> 
 <td><code>100</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.bubble.size</code></td> 
 <td>number &nbsp; &nbsp; 粒子抓取泡沫效果之间的大小</td> 
 <td><code>40</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.bubble.duration</code></td> 
 <td>number &nbsp; &nbsp;粒子抓取泡沫效果之间的持续时间 (second)</td> 
 <td><code>0.4</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.repulse.distance</code></td> 
 <td>number &nbsp; &nbsp; &nbsp;&nbsp;击退效果距离</td> 
 <td><code>200</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.repulse.duration</code></td> 
 <td>number &nbsp; &nbsp; &nbsp;击退效果持续事件 (second)</td> 
 <td><code>1.2</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.push.particles_nb</code></td> 
 <td>number &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;粒子推出的数量</td> 
 <td><code>4</code></td> 
 </tr> 
 <tr> 
 <td><code>interactivity.events.modes.remove.particles_nb</code></td> 
 <td>number</td> 
 <td><code>4</code></td> 
 </tr> 
 <tr> 
 <td><code>retina_detect</code></td> 
 <td>boolean</td> 
 <td><code>true</code>&nbsp;/&nbsp;<code>false</code></td> 
 </tr> 
 </tbody> 
</table>

[https_www.cnblogs.com_wangyihong_p_8618305.html]: https://www.cnblogs.com/wangyihong/p/8618305.html