Small JavaScript Library For Particles Animation – particles.js

Preview:

Description:

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