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.
Step 2: Download the Particles.js library using GitHub or the Download button on the website.
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.
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.
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.
I have compiled the code in a single html file and you can download it here:
Button Text