Small JavaScript Library For Particles Animation – particles.js

particles.js is a lightweight yet customizable JavaScript library used to draw a modern particles animation on an HTML5 canvas element.

How to use it:

Create an HTML5 canvas element on which you want to draw the animated particles.

<canvas id="demo"></canvas>

Download and place the particles.js library into your webpage where needed.

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

Initialize the particles.js and draw a default particles animation on the canvas element.

Particles.init({
  selector: '#demo'
});

Customize the particles animation using the following settings.

Particles.init({
  // an array of objects containing breakpoints and options
  responsive: null,
  // selector
  selector: null,
  // maximum number of particels
  maxParticles: 100,
  // size variations
  sizeVariations: 3,
  // shows particles
  showParticles: true,
  // animation speed
  speed: 0.5,
  // color of particles
  color: '#000000',
  // minimux number of distance between particles
  minDistance: 120,
  // draws lines between particles
  connectParticles: false
  
});

Changelog:

08/10/2018

• v2.2.3