ホーム>プログラミング関連>その他のソースコード
ダウンロード

パーティクル.js

パーティクルを作成するための軽量の JavaScript ライブラリ。

Demo / Generator

CodePen で粒子.js 構成を構成、エクスポート、共有します。
http://vincentgarreau.com/particles.js/

CodePen のデモ:
http://codepen.io/VincentGarreau/pen/pnlso

Usage

particles.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 16 進数 (文字列)
RGB（オブジェクト）
HSL（オブジェクト）
配列選択(16進数)
ランダム（文字列）		 "#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 16 進数 (文字列) "#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 16 進数 (文字列) #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番号
（2番目）		 0.4
interactivity.events.modes.repulse.distance番号200
interactivity.events.modes.repulse.duration番号
（2番目）		 1.2
interactivity.events.modes.push.particles_nb番号4
interactivity.events.modes.push.particles_nb番号4
retina_detectブール値true / false

Packages install

npm

https://www.npmjs.com/package/particles.js 

 npm install particles.js
バウアー
 bower install particles.js --save
レールアセット
 gem 'rails-assets-particles.js'
流星

https://atmospherejs.com/newswim/particles 

 meteor add newswim:particles

Hosting / CDN

このホストまたは独自のホストを使用して、particles.js をプロジェクトにロードしてください

http://www.jsdelivr.com/#!particles.js

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて