particles.js

Partikel.js

Eine leichte JavaScript-Bibliothek zum Erstellen von Partikeln.

---

Demo / Generator

Konfigurieren, exportieren und teilen Sie Ihre Partikel.js-Konfiguration auf CodePen:
http://vincentgarreau.com/particles.js/

CodePen-Demo:
http://codepen.io/VincentGarreau/pen/pnlso

---

Usage

Laden Sie „particles.js“ und konfigurieren Sie die Partikel:

index.html

 < div id =" particles-js " > </ div >

< 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' ) ;
} ) ;

Partikel.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

Schlüssel	Optionstyp / Hinweise	Beispiel
particles.number.value	Nummer	40
particles.number.density.enable	Boolescher Wert	true / false
particles.number.density.value_area	Nummer	800
particles.color.value	HEX (Zeichenfolge) RGB (Objekt) HSL (Objekt) Array-Auswahl (HEX) zufällig (Zeichenfolge)	"#b61924" {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", "#333333", "999999"] "random"
particles.shape.type	Zeichenfolge Array-Auswahl	"circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"]
particles.shape.stroke.width	Nummer	2
particles.shape.stroke.color	HEX (Zeichenfolge)	"#222222"
particles.shape.polygon.nb_slides	Nummer	5
particles.shape.image.src	Pfad-Link svg / png / gif / jpg	"assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width	Nummer (für Seitenverhältnis)	100
particles.shape.image.height	Nummer (für Seitenverhältnis)	100
particles.opacity.value	Zahl (0 bis 1)	0.75
particles.opacity.random	Boolescher Wert	true / false
particles.opacity.anim.enable	Boolescher Wert	true / false
particles.opacity.anim.speed	Nummer	3
particles.opacity.anim.opacity_min	Zahl (0 bis 1)	0.25
particles.opacity.anim.sync	Boolescher Wert	true / false
particles.size.value	Nummer	20
particles.size.random	Boolescher Wert	true / false
particles.size.anim.enable	Boolescher Wert	true / false
particles.size.anim.speed	Nummer	3
particles.size.anim.size_min	Nummer	0.25
particles.size.anim.sync	Boolescher Wert	true / false
particles.line_linked.enable	Boolescher Wert	true / false
particles.line_linked.distance	Nummer	150
particles.line_linked.color	HEX (Zeichenfolge)	#ffffff
particles.line_linked.opacity	Zahl (0 bis 1)	0.5
particles.line_linked.width	Nummer	1.5
particles.move.enable	Boolescher Wert	true / false
particles.move.speed	Nummer	4
particles.move.direction	Zeichenfolge	"none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left"
particles.move.random	Boolescher Wert	true / false
particles.move.straight	Boolescher Wert	true / false
particles.move.out_mode	Zeichenfolge (aus Leinwand)	"out" "bounce"
particles.move.bounce	Boolescher Wert (zwischen Teilchen)	true / false
particles.move.attract.enable	Boolescher Wert	true / false
particles.move.attract.rotateX	Nummer	3000
particles.move.attract.rotateY	Nummer	1500
interactivity.detect_on	Zeichenfolge	"canvas", "window"
interactivity.events.onhover.enable	Boolescher Wert	true / false
interactivity.events.onhover.mode	Zeichenfolge Array-Auswahl	"grab" "bubble" "repulse" ["grab", "bubble"]
interactivity.events.onclick.enable	Boolescher Wert	true / false
interactivity.events.onclick.mode	Zeichenfolge Array-Auswahl	"push" "remove" "bubble" "repulse" ["push", "repulse"]
interactivity.events.resize	Boolescher Wert	true / false
interactivity.events.modes.grab.distance	Nummer	100
interactivity.events.modes.grab.line_linked.opacity	Zahl (0 bis 1)	0.75
interactivity.events.modes.bubble.distance	Nummer	100
interactivity.events.modes.bubble.size	Nummer	40
interactivity.events.modes.bubble.duration	Nummer (zweite)	0.4
interactivity.events.modes.repulse.distance	Nummer	200
interactivity.events.modes.repulse.duration	Nummer (zweite)	1.2
interactivity.events.modes.push.particles_nb	Nummer	4
interactivity.events.modes.push.particles_nb	Nummer	4
retina_detect	Boolescher Wert	true / false

---

Packages install

npm

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

 npm install particles.js

Laube

 bower install particles.js --save

Rails-Vermögenswerte

 gem 'rails-assets-particles.js'

Meteor

https://atmospherejs.com/newswim/particles

 meteor add newswim:particles

---

Hosting / CDN

Bitte verwenden Sie diesen Host oder Ihren eigenen, um „particles.js“ in Ihre Projekte zu laden

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