particlesJs手冊(cè)

quick start

首先需要引用particles.js,然后創(chuàng)建一個(gè)空元素。

    <div id="particles"></div>
          ......
    <script src="particles.js"></script>
  

然后在js中寫配置就可以了

particlesJS.load('particles', {
    ......
}); 

先展示完整的配置項(xiàng)示例,之后附上完整的api。

    {
          "particles": {
            "number": {
              "value": 300,
              "density": {
                "enable": true,
                "value_area": 700
              }
            },
            "color": {
              "value": ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"]
            },
            "shape": {
              "type": "edge",
              "stroke": {
                "width": 0,
                "color": "#000000"
              },
              "polygon": {
                "nb_sides": 15
              }
            },
            "opacity": {
              "value": 0.5,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 1.5,
                "opacity_min": 0.15,
                "sync": false
              }
            },
            "size": {
              "value": 2.5,
              "random": false,
              "anim": {
                "enable": true,
                "speed": 2,
                "size_min": 0.15,
                "sync": false
              }
            },
            "line_linked": {
              "enable": true,
              "distance": 110,
              "color": "#33b1f8",
              "opacity": 0.25,
              "width": 1
            },
            "move": {
              "enable": true,
              "speed": 1.6,
              "direction": "none",
              "random": false,
              "straight": false,
              "out_mode": "out",
              "bounce": false,
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            "detect_on": "canvas",
            "events": {
              "onhover": {
                "enable": false,
                "mode": "repulse"
              },
              "onclick": {
                "enable": false,
                "mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 400,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              "repulse": {
                "distance": 200,
                "duration": 0.4
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true
        }

Api手冊(cè)

鍵值 參數(shù)說明 示例/默認(rèn)值
particles.number.value number
數(shù)量
40
particles.number.density.enable boolean true / false
particles.number.density.value_area number
區(qū)域散布密度大小
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
原子的多邊形邊數(shù)
5
particles.shape.image.src path
link
svg / png / gif / jpg
原子的圖片可以使用自定義圖片
"assets/img/yop.svg"
"https://xxx.com/xxx.jpg"
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
隨機(jī)不透明度
true / false
particles.opacity.anim.enable boolean
漸變動(dòng)畫
true / false
particles.opacity.anim.speed number
漸變動(dòng)畫速度
3
particles.opacity.anim.opacity_min number(0 to 1)
漸變動(dòng)畫不透明度
0.25
particles.opacity.anim.sync boolean true / false
particles.size.value number
原子大小
20
particles.size.random boolean
原子大小隨機(jī)
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
原子移動(dòng)
true / false
particles.move.speed number
原子移動(dòng)速度
4
particles.move.direction string
原子移動(dòng)方向
"none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.random boolean
移動(dòng)隨機(jī)方向
true / false
particles.move.straight boolean
直接移動(dòng)
true / false
particles.move.out_mode string (out of canvas)
是否移動(dòng)出畫布
"out"
"bounce"
particles.move.bounce boolean
(between particles)是否跳動(dòng)移動(dòng)
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
原子之間互動(dòng)檢測(cè)
"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
點(diǎn)擊效果
true / false
interactivity.events.onclick.mode string
array selection
點(diǎn)擊效果模式
"push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
interactivity.events.resize boolean
互動(dòng)事件調(diào)整
true / false
interactivity.events.modes.grab.distance number
原子互動(dòng)抓取距離
100
interactivity.events.modes.grab.line_linked.opacity number(0 to 1)
原子互動(dòng)抓取距離連線不透明度
0.75
interactivity.events.modes.bubble.distance number
原子抓取泡沫效果之間的距離
100
interactivity.events.modes.bubble.size number
原子抓取泡沫效果之間的大小
40
interactivity.events.modes.bubble.duration number
原子抓取泡沫效果之間的持續(xù)事件(second)
0.4
interactivity.events.modes.repulse.distance number
擊退效果距離
200
interactivity.events.modes.repulse.duration number
擊退效果持續(xù)事件(second)
1.2
interactivity.events.modes.push.particles_nb number
粒子推出的數(shù)量
4
interactivity.events.modes.push.particles_nb number 4
retina_detect boolean true / false
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,654評(píng)論 19 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,217評(píng)論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,432評(píng)論 4 61
  • 那天的云是否都已料到所以腳步才輕巧以免打擾到我們的時(shí)光 這首來自劉若英的《知道不知道》,是電影《天下無賊》中的插曲...
    火龍果旅游閱讀 1,596評(píng)論 0 0
  • 最近時(shí)不時(shí)地會(huì)特別有沖動(dòng)寫東西。直接原因應(yīng)該是因?yàn)樽x了王小波。王小波的書對(duì)我有強(qiáng)大的吸引力,同時(shí)也讓我覺得寫東西好...
    9c101ae7a82a閱讀 390評(píng)論 1 1

友情鏈接更多精彩內(nèi)容