Creating Particles With JavaScript And Canvas – Particles.js

Category: Animation , Javascript | February 3, 2017
Views Total:5,265 views
Official Page:Go to website
Last Update:February 3, 2017


Creating Particles With JavaScript And Canvas – Particles.js


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


$ 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" 

You Might Be Interested In:

Leave a Reply