Creating An Animated Particle System Using Particles.js

Particles.js is a standalone JavaScript library helps you create an animated & interactive Particle System that reacts to viewer’s cursor. Based on Html5 canvas element.

How to use it:

Create an empty container where you wish to generate a particle system.

<div id="particles-js"></div>

Load the Particles.js script at the end of the document so the page loads faster.

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

Active the particle system and config particles.js’ params.

particlesJS('particles-js', {
  canvas: {
    color_hex_bg: '#15414e',
    opacity: 1
  },
  particles: {
    color_hex: '#fff',
    opacity: 1,
    size: 2.5,
    size_random: true,
    nb: 200,
    anim: {
      speed: 2
    }
  },
  retina_detect: true
});

All the default params.

particles: {
  color: '#fff',
  shape: 'circle',
  opacity: 1,
  size: 2.5,
  size_random: true,
  nb: 200,
  line_linked: {
    enable_auto: true,
    distance: 100,
    color: '#fff',
    opacity: 1,
    width: 1,
    condensed_mode: {
      enable: true,
      rotateX: 65000,
      rotateY: 65000
    }
  },
  anim: {
    enable: true,
    speed: 1
  },
  array: []
  },
  interactivity: {
    enable: true,
    mouse: {
      distance: 100
    },
    detect_on: 'canvas',
    mode: 'grab'
  },
  retina_detect: false,
  fn: {
    vendors:{
      interactivity: {}
    }
}

Changelog:

05/10/2015

• Update