How to use Particle.js in JavaScript project ?
Particles.js is a lightweight JavaScript library used for creating particles which looks likes the vertices of polygon. We can also interact by hovering over the particles and create more particles by clicking on particles.
Here is the example of particle.js
We can use this library in our portfolios which will definitely attract many users and will look good in the website.
Installation process:
1. Download the particles.js library from the following link, unzip it and copy it into your project folder. https://vincentgarreau.com/particles.js/
2. Create two files index.html and style.css.
Write the following code in index.html file.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>particles.js</title> <!-- Import style.css from root directory --> <link rel="stylesheet" href="./style.css" /> </head> <body> <!-- Particles.js div --> <div id="particles-js"> <div class="heading"> <h1>GeeksforGeeks</h1> <h3> A computer Science portal for geeks </h3> </div> </div> <!-- Import Particles.js and app.js files --> <script src= "particles.js-master/particles.js"> </script> <script src= "/particles.js-master/demo/js/app.js"> </script> </body> </html> |
Filename: style.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
.heading {
position: absolute;
text-align: center;
top: 30%;
width: 100%;
}
.heading h1 {
color: limegreen;
font-size: 70px;
}
.heading h3 {
color: wheat;
font-size: 20px;
}
#particles-js {
background: black;
height: 100vh;
}
3. Save the above code in respective files and run index.html file.
Note: If you are using node app, then we can simply download particles.js node module by following command.
npm install particles.js
And import particles.js and app.js files from node_modules folder and write the html code.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>particles.js</title> <!-- Import style.css from root directory --> <link rel="stylesheet" href="./style.css" /> </head> <body> <!-- Particles.js div --> <div id="particles-js"> <div class="heading"> <h1>GeeksforGeeks</h1> <h3>A computer Science portal for geeks</h3> </div> </div> <!-- Import Particles.js and app.js files --> <script src= "/node_modules/particles.js/particles.js"> </script> <script src= "/node_modules/particles.js/demo/js/app.js"> </script> </body> </html> |
We can change particles properties and interactivity by modifying app.js and then see the magic.
Output:
Please Login to comment...