Subtle Particles Animation In Vanilla JavaScript – bParticles.js

bParticles.js is a vanilla JavaScript plugin for creating a subtle particles animation using HTML5 canvas.

The plugin enables you to generate configurable particles that move randomly within a specified container.

How to use it:

Download and import the ‘bParticles.js’ library into the document.

<script src="bParticles.js"></script>

Create a new bParticles object and apply the Particles Animation to a container you specify.

<div id="example"></div>

bParticles({
  "container": "#example"
})

bParticles({
  // target container
  "container": "#example",
  // FPS
  "fps": 30,
  
  // the amount of particles to generate
  "amount": 30,
  // min/max sizes
  "size":{
    "min": 2,
    "max": 48
  },
  // min/max animation speed
  "speed":{
    "min": 2,
    "max": 10
  },
  // particle styles
  "style":{
    "backgroundColor": "",
    "fill":{
      "color": "#66FF00",
      "opacity": "0.8"
    }
  }
  
})

Changelog:

08/05/2018

• v2