particles.js
2.0.0
Demo / Generator
在 CodePen 上設定、匯出和分享您的 keywords.js 配置:
http://vincentgarreau.com/articles.js/
CodePen 演示:
http://codepen.io/VincentGarreau/pen/pnlso
Usage
載入粒子.js 並配置粒子:
索引.html
< div id =" particles-js " > </ div >
< script src =" particles.js " > </ script >
應用程式.js
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS . load ( 'particles-js' , 'assets/particles.json' , function ( ) {
console . log ( 'callback - particles.js config loaded' ) ;
} ) ;
粒子.json
{
"particles" : {
"number" : {
"value" : 80 ,
"density" : {
"enable" : true ,
"value_area" : 800
}
} ,
"color" : {
"value" : "#ffffff"
} ,
"shape" : {
"type" : "circle" ,
"stroke" : {
"width" : 0 ,
"color" : "#000000"
} ,
"polygon" : {
"nb_sides" : 5
} ,
"image" : {
"src" : "img/github.svg" ,
"width" : 100 ,
"height" : 100
}
} ,
"opacity" : {
"value" : 0.5 ,
"random" : false ,
"anim" : {
"enable" : false ,
"speed" : 1 ,
"opacity_min" : 0.1 ,
"sync" : false
}
} ,
"size" : {
"value" : 10 ,
"random" : true ,
"anim" : {
"enable" : false ,
"speed" : 80 ,
"size_min" : 0.1 ,
"sync" : false
}
} ,
"line_linked" : {
"enable" : true ,
"distance" : 300 ,
"color" : "#ffffff" ,
"opacity" : 0.4 ,
"width" : 2
} ,
"move" : {
"enable" : true ,
"speed" : 12 ,
"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" : true ,
"mode" : "push"
} ,
"resize" : true
} ,
"modes" : {
"grab" : {
"distance" : 800 ,
"line_linked" : {
"opacity" : 1
}
} ,
"bubble" : {
"distance" : 800 ,
"size" : 80 ,
"duration" : 2 ,
"opacity" : 0.8 ,
"speed" : 3
} ,
"repulse" : {
"distance" : 400 ,
"duration" : 0.4
} ,
"push" : {
"particles_nb" : 4
} ,
"remove" : {
"particles_nb" : 2
}
}
} ,
"retina_detect" : true
}
Options
鑰匙 | 選項類型/註釋 | 例子 |
---|---|---|
particles.number.value | 數位 | 40 |
particles.number.density.enable | 布林值 | true / false |
particles.number.density.value_area | 數位 | 800 |
particles.color.value | 十六進位(字串) RGB(對象) HSL(物件) 數組選擇(十六進位) 隨機(字串) | "#b61924" {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", "#333333", "999999"] "random" |
particles.shape.type | 細繩 陣列選擇 | "circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"] |
particles.shape.stroke.width | 數位 | 2 |
particles.shape.stroke.color | 十六進位(字串) | "#222222" |
particles.shape.polygon.nb_slides | 數位 | 5 |
particles.shape.image.src | 路徑連結 svg/png/gif/jpg | "assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png" |
particles.shape.image.width | 數位 (對於縱橫比) | 100 |
particles.shape.image.height | 數位 (對於縱橫比) | 100 |
particles.opacity.value | 數字(0 到 1) | 0.75 |
particles.opacity.random | 布林值 | true / false |
particles.opacity.anim.enable | 布林值 | true / false |
particles.opacity.anim.speed | 數位 | 3 |
particles.opacity.anim.opacity_min | 數字(0 到 1) | 0.25 |
particles.opacity.anim.sync | 布林值 | true / false |
particles.size.value | 數位 | 20 |
particles.size.random | 布林值 | true / false |
particles.size.anim.enable | 布林值 | true / false |
particles.size.anim.speed | 數位 | 3 |
particles.size.anim.size_min | 數位 | 0.25 |
particles.size.anim.sync | 布林值 | true / false |
particles.line_linked.enable | 布林值 | true / false |
particles.line_linked.distance | 數位 | 150 |
particles.line_linked.color | 十六進位(字串) | #ffffff |
particles.line_linked.opacity | 數字(0 到 1) | 0.5 |
particles.line_linked.width | 數位 | 1.5 |
particles.move.enable | 布林值 | true / false |
particles.move.speed | 數位 | 4 |
particles.move.direction | 細繩 | "none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left" |
particles.move.random | 布林值 | true / false |
particles.move.straight | 布林值 | true / false |
particles.move.out_mode | 細繩 (畫布外) | "out" "bounce" |
particles.move.bounce | 布林值 (粒子之間) | true / false |
particles.move.attract.enable | 布林值 | true / false |
particles.move.attract.rotateX | 數位 | 3000 |
particles.move.attract.rotateY | 數位 | 1500 |
interactivity.detect_on | 細繩 | "canvas", "window" |
interactivity.events.onhover.enable | 布林值 | true / false |
interactivity.events.onhover.mode | 細繩 陣列選擇 | "grab" "bubble" "repulse" ["grab", "bubble"] |
interactivity.events.onclick.enable | 布林值 | true / false |
interactivity.events.onclick.mode | 細繩 陣列選擇 | "push" "remove" "bubble" "repulse" ["push", "repulse"] |
interactivity.events.resize | 布林值 | true / false |
interactivity.events.modes.grab.distance | 數位 | 100 |
interactivity.events.modes.grab.line_linked.opacity | 數字(0 到 1) | 0.75 |
interactivity.events.modes.bubble.distance | 數位 | 100 |
interactivity.events.modes.bubble.size | 數位 | 40 |
interactivity.events.modes.bubble.duration | 數位 (第二) | 0.4 |
interactivity.events.modes.repulse.distance | 數位 | 200 |
interactivity.events.modes.repulse.duration | 數位 (第二) | 1.2 |
interactivity.events.modes.push.particles_nb | 數位 | 4 |
interactivity.events.modes.push.particles_nb | 數位 | 4 |
retina_detect | 布林值 | true / false |
Packages install
https://www.npmjs.com/package/articles.js
npm install particles.js
bower install particles.js --save
gem 'rails-assets-particles.js'
https://atmospherejs.com/newswim/articles
meteor add newswim:particles
Hosting / CDN
請使用此主機或您自己的主機在您的專案中載入 keywords.js
http://www.jsdelivr.com/#!articles.js