http://vincentgarreau.com/particles.js/ 參數說明

藉由調整參數,可製作出客製化的 particles.js,應用在不同的網頁。

以下為各參數的功能解釋(以Default模式為主):

Default 預設的點與線模式
NASA 美國航太總署模式
Bubble 泡泡模式
Snow 雪花模式
Nyan Cat 霓虹貓模式
particles 點的設定
number
value 同一時間出現在畫布的點數量(基本值)
density.enable 在局部區域內的保證密度
density.value_area 保證密度的範圍(值愈小,整體數量愈多)
color
value (single string) 點的顏色
shape
stroke
stroke.width 點的邊線寬度
stroke.color 點的邊線顏色
polygon
polygon.nb_sides 點的多邊形邊數(3至12)
image
image.src 點的圖片來源
image.width 點的圖片寬度
image.height 點的圖片高度
type
circle 圓形
edge 正方形
triangle 正立三角形
polygon 多邊形
star 五稜星形(polygon.nb_sides必須設為5)
image 採用圖片
size
value 點的平均大小
random 點的大小採隨機值
opacity
anim
anim.enable 單一點的透明度變化動畫
anim.speed 透明度變化速度
anim.opacity_min 透明度變化時的最低值
anim.sync 所有點的透明度變化同步進行
value 透明度變化時的最高值
random 各點之透明度變化速度隨機
line_linked
enable_auto 啟用點與點之間的連線
distance 當兩點的距離小於此值時啟動連線
color 連線顏色
opacity 連線透明度
width 連線寬度
move
enable 點的移動啟用
direction
none 無特定方向
top 往上移動
top-right 往右上移動
right 往右移動
bottom-right 往右下移動
bottom 往下移動
bottom-left 往左下移動
left 往左移動
top-left 往左上移動
random 若有移動,各點的移動速度隨機
straight 若有移動,各點的移動方向一致
interactivity
onhover 滑鼠滑過
enable 滑鼠滑過就有反應
mode
grab 滑鼠位置,與附近的點進行連線
bubble 滑鼠位置,附近的點放大、變不透明
repulse 滑鼠位置,附近的點會避開
onclick
enable 按下滑鼠按鍵時有反應
mode
push 在滑鼠位置釋放新的點
remove 隨機移除幾個點
bubble 滑鼠位置,附近的點放大、變不透明
repulse 滑鼠位置,附近的點會避開
modes
grab
line_linked
opacity 連線透明度
distance 進行連線之滑鼠游標與點的距離
bubble
distance 產生泡沫效果的距離
size 泡沫最大尺寸
opacity 泡沫最不透明時的透明度
duration (sec) 泡沫從原尺寸到最大尺寸所花費的秒數
repulse
distance 產生迴避效果的距離
push
remove
detect_on
windows 在瀏覽器視窗區域內偵測
canvas 在動畫畫布區域內偵測
page background (css)
background-color 背景顏色
background-image url 背景圖片位址
background-size 背景尺寸
background-position 背景位置
background-repeat 背景重複顯示
hide card 隱藏簡介視窗
retina_detect
Export image (png) 截圖快照成PNG圖檔
Download current config (json) 下載目前的設定json檔