Creating Particles With JavaScript And Canvas – Particles.js

Preview:

Description:

Just another JavaScript library which utilizing HTML5 canvas and CSS to render randomly animated particles on the webpage.

Installation:

$ npm install particles

How to use it:

Insert the main JavaScript file particles.js into the webpage.

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

Create an HTML5 canvas element for the Particles.

<canvas id="particles"></canvas>

Render a default particle animation on the canvas element.

new Particles(document.getElementById("particles"));

Customize the particle animation:

new Particles(document.getElementById("particles"), {
    // size of the particles
    size: { 
      min: 0,
      max: 2
    },
    // density of particles on the canvas
    density: 1000,  
    // speed of the particules
    speed: 3, 
    // number of times per second the canvas is refreshed
    fps: 60, 
    // color of the particles
    color: "#FFFFFF" 
    
});