因為自己需要做產品，所以好的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 區域散佈密度大小800<span style="color:#111111;font-family:NSimsun"></span> |
|
#particles.color.value<span style="color:#111111;font-family:NSimsun"></span> | ##HEX (string)
RGB (object)
HSL (object) |
<span style="color:#111111;font-family:NSimsun">"#b61924"</span> <span style="color:#111111;font-family:NSimsun">#{r:182，g:25，b:36}</span> ##{h:356, s:76, l:41}<span style="color:#111111;font-family:NSimsun"></span># #["#b61924", "#333333", " 999999 "]<span style="color:#111111;font-family:NSimsun"></span> #"隨機"<span style="color:#111111;font-family:NSimsun"></span>
|
##porn.shape.類型# ＃＃＃＃＃＃＃＃＃
陣列選擇原子的形狀<span style="color:#111111;font-family:NSimsun"></span>"circle" |
|
#"edge"<span style="color:#111111;font-family:NSimsun"> </span> #「三角形」 <span style="color:#111111;font-family:NSimsun"> </span>#「多邊形」 <span style="color:#111111;font-family:NSimsun"> </span>#「星狀」 <span style="color:#111111;font-family:NSimsun"> ## ＃＃＃＃＃＃＃“圖像”＃＃＃＃＃ ＃<code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><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"></span> |
<span style="color:#111111;font-family:NSimsun"></span> |
|
<span style="color:#111111;font-family:NSimsun"></span> |
#particles.shape.stroke.color<span style="color:#111111;font-family:NSimsun"></span>##HEX (string) 原子顏色
|
|
<span style="color:#111111;font-family:NSimsun"></span>
|
particles.shape.polygon.nb_slides #########number 原子的多邊形邊數############### #####5#########################particles.shape.image.src###########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"></span>
| "http://mywebsite.com/assets/img/yop.png"
<span style="color:#111111;font-family:NSimsun"></span> | #particles.shape.image.widthnumber
(for aspect ratio) 圖片寬度<span style="color:#111111;font-family:NSimsun"></span>
| 100|
<span style="color:#111111;font-family:NSimsun"></span> | particles.shape.image. height
######number ####(for aspect ratio) 圖片高度 |
<span style="color:#111111;font-family:NSimsun">100</span> |
##particles.opacity.value<span style="color:#111111;font-family:NSimsun"></span> | number (0 to 1) 不透明度0.75<span style="color:#111111;font-family:NSimsun"></span> |
|
particles.opacity.random<span style="color:#111111;font-family:NSimsun"></span> | boolean 隨機不透明度
true<span style="color:#111111;font-family:NSimsun"></span># / #false<span style="color:#111111;font-family:NSimsun"></span>
|
|
particles.opacity.anim.enable<span style="color:#111111;font-family:NSimsun"></span> | boolean 漸層動畫
true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
|
|
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.speed</span> |
number 反射式動畫速度 | <span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span> |
#particles.opacity.anim.opacity_min | <span style="color:#111111;font-family:NSimsun"></span># number (0 to 1) 漸層動畫不透明度 |
<span style="color:#111111;font-family:NSimsun"></span> |
particles.opacity .anim.sync |
<span style="color:#111111;font-family:NSimsun"></span>boolean<span style="color:#111111;font-family:NSimsun"></span>#true
| /
<span style="color:#111111;font-family:NSimsun"></span>##################################################################################################################################################################################################################################### # ##################particles.size.value### |
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>## / false<span style="color:#111111;font-family:NSimsun">##true</span>## /
| false
<span style="color:#111111;font-family:NSimsun"></span> | ##particles.size.anim.enable
boolean 原子漸層<span style="color:#111111;font-family:NSimsun"></span>#true<span style="color:#111111;font-family:NSimsun"></span> /
| false|
<span style="color:#111111;font-family:NSimsun"></span> | particles.size.anim. speednumber 原子漸變速度<span style="color:#111111;font-family:NSimsun"></span>######3### |
|
##articles.size.anim.size_min<span style="color:#111111;font-family:NSimsun"></span> | number#0.25<span style="color:#111111;font-family:NSimsun"></span> |
|
#articles.size.anim.sync<span style="color:#111111;font-family:NSimsun"></span> | boolean
true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
|
|
粒子.line_linked.enable<span style="color:#111111;font-family:NSimsun"></span> | boolean 連接線
true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun">##true</span> / |
|
<span style="color:#111111;font-family:NSimsun"></span>#########articles.line_linked.distance### |
number 連接線距離 | <span style="color:#111111;font-family:NSimsun">150</span> |
<span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span>## particles.line_linked.color |
|
<span style="color:#111111;font-family:NSimsun"></span>ffffff |
<span style="color:#111111;font-family:NSimsun"></span> |
|
<span style="color:#111111;font-family:NSimsun"></span> |
#particles.line_linked.opacity | <span style="color:#111111;font-family:NSimsun"></span>#number (0 to 1) 連接線不透明度############# #0.5########################particles.line_linked.width###########number 連接線的寬度## ##########1.5#### |
<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"></span> |
<span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>## particles.move.direction#########string 原子移動方向#############"none"###### ##############"none"###### ######################### #"top"###### #########"top-right"####### #########"right"###### ## #######"bottom-right"###### ##### <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> |
<span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>
|
|
## / <span style="color:#111111;font-family:NSimsun"></span> |
#particles.move.straight |
<span style="color:#111111;font-family:NSimsun"></span>1lean 直接移動<span style="color:#111111;font-family:NSimsun"></span>true
|
<span style="color:#111111;font-family:NSimsun"></span> |
########################################################################################################### ## / ######false#########################particles.move.out_mode################################################################################# #string ###(out of canvas) 是否移動出畫布 |
<span style="color:#111111;font-family:NSimsun">#"out"</span> ##"bounce"<span style="color:#111111;font-family:NSimsun"></span> |
#particles.move.bounce<span style="color:#111111;font-family:NSimsun"></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"></span> |
<span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>
|
|
<span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span> |
|
<span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span>############################################################################ ########particles.move.attract.enable#############boolean 原子之間吸引############true#######true##################true##### # / ######false#########################particles.move.attract.rotateX##################################################################### ##number 原子之間吸引X水平距離############3000########################particles.move .attract.rotateY############number y垂直距離#############1500### |
|
<span style="color:#111111;font-family:NSimsun">interactivity.detect_on</span> |
#interactivity.detect_on<span style="color:#111111;font-family:NSimsun"></span> | string 原子之間互動偵測|
#"canvas", "window"<span style="color:#111111;font-family:NSimsun"></span>
|
#interactivity.events.onhover.enable<span style="color:#111111;font-family:NSimsun"></span> #boolean 懸停<span style="color:#111111;font-family:NSimsun"></span>
| true|
false<span style="color:#111111;font-family:NSimsun"></span> |
|
<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"></span> |
<span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>
|
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.onclick.enable</span> |
boolean 點選效果 true ##################################################### / ######false#########################interactivity.events.onclick.mode##################################################################################################### ####string ### array selection######點選效果模式### |
<span style="color:#111111;font-family:NSimsun">「推」</span> <span style="color:#111111;font-family:NSimsun">##「刪除」</span> <span style="color:#111111;font-family:NSimsun"># 「氣泡「</span> <span style="color:#111111;font-family:NSimsun">#『擊退』</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>
|
#false<span style="color:#111111;font-family:NSimsun"></span> |
#false<span style="color:#111111;font-family:NSimsun"></span>
|
|
<span style="color:#111111;font-family:NSimsun"></span> |
#false | <span style="color:#111111;font-family:NSimsun"></span> | #false
<span style="color:#111111;font-family:NSimsun"></span>#### ###########interactivity.events.modes.grab.distance############number 原子互動抓取距離#################### 100########################interactivity.events.modes.grab.line_linked.opacity#############number ( 0 to 1) 原子互動抓取距離連線不透明度############0.75################################################################################ interactivity.events.modes.bubble.distance### |
number 原子抓取泡棉效果之間的距離 | <span style="color:#111111;font-family:NSimsun">100</span> |
<span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span> |
|
<span style="color:#111111;font-family:NSimsun"></span> |
################ ######interactivity.events.modes.bubble.size############number 原子抓取泡棉效果之間的大小#############40 ########################interactivity.events.modes.bubble.duration################interactivity.events.modes.bubble.duration############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"></span> |
################################################ ###interactivity.events.modes.repulse.duration############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 粒子推出的數量 | ##4<span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span> |
|
<span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>#interactivity.events.modes.push.particles_nb |
以上是JS庫之Particles.js中文開發手冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
