Tutorial: Add particles.js to your Web Project

Particles.js is a lightweight Javascript Library for creating particles. The Particles.js library is open source and you can create beautiful looking landing pages or sections on your website. The particles.js is create by Vincent Garreau and it’s every easy to add particles.js to your Web Project.

How to add particles.js to your web project?

Step 1: Go to the official particle.js website. The website has a beautiful demo with statistics and options for using the library.

Particles.js Website

Step 2: Download the Particles.js library using GitHub or the Download button on the website.

Download Particles.js

Step 3: Once downloaded, unzip the archive. You will see the library with multiple files and a demo folder. You can either use particles.js or particles.min.js file. Copy the .js library to your project file.

Particles.js Files

HTML File

Step 4: Now, let’s create an html file that will display our particles. Include your particles.js in the head of the HTML file.

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" src="particles.js"></script>
 <title>Particles.js Demo</title>
</head>
<body id="particles-js">
<img src="circle.png" id="logo">
</body>
</html>

CSS File

Step 5: Create a CSS file to style your HTML page. Here, I am just going to change the background of the body for the demo.

body{
    background: cornflowerblue;
}

Particles.js Options

Step 6: Now comes the library configuration part. The best part about the Particles.js library is that the developer has an interactive GUI where you can set your options and generate the JSON file for the config. Let’s take a look at the various options. The first option is to select the particle type. You can choose from Default, NASA, Bubble, Snow, Nyan Cat. I am gonna stick to the default option. The particle attributes option lets you set a number of options for number, color, shape, size, etc. All the options are self explanatory but if you need any help, please use the comments section below. Similarly, interactivity and page background options can be set.

Add particles.js to your Web Project

Step 7: Once done, download the JSON file by clicking on Download current config (json). The JSON file contains the particle properties.

{
 "particles": {
 "number": {
 "value": 80,
 "density": {
 "enable": true,
 "value_area": 800
 }
 },
 "color": {
 "value": "#ffffff"
 },
 "shape": {
 "type": "circle",
 "stroke": {
 "width": 0,
 "color": "#000000"
 },
 "polygon": {
 "nb_sides": 5
 },
 "image": {
 "src": "img/github.svg",
 "width": 100,
 "height": 100
 }
 },
 "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": "repulse"
 },
 "onclick": {
 "enable": true,
 "mode": "push"
 },
 "resize": true
 },
 "modes": {
 "grab": {
 "distance": 400,
 "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
}

Final Steps

Step 8: Now, the last step, add the properties to your HTML file. To do this, create a script tag and paste your JSON in the placeholder mentioned below.

<script type="text/javascript">
 particlesJS("particles-js",<strong>Your JSON here</strong>);
</script>

Add this code at the bottom of your body and add and id=”particles-js” to the element you want the particles on. I am simply going to put the id attribute in the body tag.

Particles.js Preview