Based upon Vincent Garreau's particles.js which is the one you're probably looking for. See https://github.com/VincentGarreau/particles.js
This fork has a lot of functionality removed from the Vincent Garreau version as it wasn't needed for the purpose of this version. This version adds raster-functionality: the particles can be kept within (invisible) cells (tiles) in order to keep the entire screen filled with particles while maintaining the original particles-effect.
particles.raster.enable
Enables the raster-functionaly. When set to false, this script is just a scaled down version of the original particles.js. When set to true the raster will be rebuilt upon a resize window event.
particles.raster.start
When set to strict
every particle will start in the top-left corner of the cell it is bound to. This visualizes the cell-raster at
the start. When set to loose
particles will start at a random location within the cell it is bound to.
When set to strict, set particles.raster.lock to false, otherwise the effect will look rather unnerving. This functionality could be enhanced but that's out of scope of the current implementation.
particles.raster.lock
When set to true, the particles will stay within the cell they're bound to. When set to false, the particles start from their own cell but can roam everywhere afterwards.
particles.number.dynamic
If set to true particles.number.value will be interpreted to be valid for a 1024x760 browser window size. The particles.number.value will be modified to the actual browser window size.
This replaces the density-functionality of the original particles.js.
key | option type / notes | example |
---|---|---|
particles.number.value |
number | 40 |
particles.number.dynamic |
boolean | false |
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 | 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 In VincentGareau version not functional but here it is |
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.raster.enable |
boolean | true / false |
particles.raster.offscreen |
number (0 to 100) | 50 |
particles.raster.start |
string | "strict" "loose" |
particles.raster.lock |
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.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.bounce |
boolean (between particles) |
true / false |
interactivity.detect_on |
string | "canvas", "window" |
interactivity.events.resize |
boolean | true / false |
retina_detect |
boolean | true / false |