How To Add Particles Js To Your Web Project

Posted By : Swati Rahangdale | 27-May-2018

How to add particles.js to your web project?

These are the following steps mention below:

First, you need to host the library. Either you can upload it on your own server or use jsdeliver CDN like me.

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

Step 2: Download the Particles.js library.

Step 3: after download particles.js library, unzip and archive.You will found the library with multiple files and a demo folder. Now either use particles.js or particles.min.js file. Copy the .js library to your project file.

Step 4: make a 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>

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

body{

background: gray;

}

Step 6: Next is the library configuration part. The best part about the Particles.js library is that the creater has an interactive GUI where you can set your options and create the JSON file for the config. Let’s have a look at the different options. The first one is to select the particle type. You can pick the option from Default, NASA, Bubble, Snow, Nyan Cat. I will be ok with default option. The particle different option lets you set a number of options for number, color, shape, size, etc. All the options are self explanatory.

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

{
"particles": {
"number": {
"value": 70,
"density": {
"enable": true,
"value_area": 700
}
},
"color": {
"value": "#000"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#0000"
},
"polygon": {
"nb_sides": 4
},
"image": {
"src": "img/github.svg",
"width": 90,
"height": 90
}
},
"opacity": {
"value": 0.4,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 30,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 140,
"color": "#fffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 500,
"rotateY": 1100
}
}
},
"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
}