JSPM – particles.js@2.0.0

Package Exports

particles.js
particles.js/particles
particles.js/particles.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (particles.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

particles.js

A lightweight JavaScript library for creating particles.

Load particles.js and configure the particles:

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

particles.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": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

`Options`

key | option type / notes | example ----|---------|------|------ particles.number.value | number | 40 particles.number.density.enable | boolean | true / false particles.number.density.value_area | number | 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.number.density.value_area | number | 800 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 | 5 particles.shape.image.src | path link
svg / png / gif / jpg | "assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png" 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 | true / false particles.opacity.anim.enable | boolean | true / false particles.opacity.anim.speed | number | 3 particles.opacity.anim.opacity_min | number (0 to 1) | 0.25 particles.opacity.anim.sync | boolean | true / false particles.size.value | number | 20 particles.size.random | boolean | 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 | true / false particles.move.speed | number | 4 particles.move.direction | string | "none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left" particles.move.random | boolean | true / false particles.move.straight | boolean | true / false particles.move.out_mode | string
(out of canvas) | "out"
"bounce" particles.move.bounce | boolean
(between particles) | true / false particles.move.attract.enable | boolean | true / false particles.move.attract.rotateX | number | 3000 particles.move.attract.rotateY | number | 1500 interactivity.detect_on | string | "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 | true / false interactivity.events.onclick.mode | string
array selection | "push"
"remove"
"bubble"
"repulse"
["push", "repulse"] interactivity.events.resize | boolean | true / false interactivity.events.modes.grab.distance | number | 100 interactivity.events.modes.grab.line_linked.opacity | number (0 to 1) | 0.75 interactivity.events.modes.bubble.distance | number | 100 interactivity.events.modes.bubble.size | number | 40 interactivity.events.modes.bubble.duration | number
(second) | 0.4 interactivity.events.modes.repulse.distance | number | 200 interactivity.events.modes.repulse.duration | number
(second) | 1.2 interactivity.events.modes.push.particles_nb | number | 4 interactivity.events.modes.push.particles_nb | number | 4 retina_detect | boolean | true / false

`Packages install`

Bower

bower install particles.js --save

Rails Assets

gem 'rails-assets-particles.js'