How to create interactive website background using particles.js?

A simple way to create interactive background

Particles.js is a lightweight JavaScript library which can help you to create lots of moving tiny particles to make your website background interactive. It’s super easy to use and you need only following things:

• particles.js library
• A div using an ID
• Few line of JS and CSS code

Installation and uses:

1. First you have to include the library CDN link or you can download and host in your server.

<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

2. Create DOM element using an ID where you wanted to show the tiny moving particles.

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

3. Now you just have to add one line of JS and CSS code to see the result.
JS code:

particlesJS();

CSS code:

#particles-js {
  background: #ff0000;
}

That's it.

Looking for more customization?
Here are few more custom option from JS to change the particles sizes, animation speed and many more.

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 180,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

• 7 jQuery functions which require almost every day
• How to change entire site’s image path/ URL in few seconds?
• An easy way to show popup from cursor point position?