How to use Particle.js in JavaScript project ?
Last Updated :
02 Aug, 2024
Improve
Particles.js is a lightweight JavaScript library used for creating particles that look like the vertices of a polygon. We can also interact by hovering over the particles and creating more particles by clicking on particles. We can use this library in our portfolios which will attract many users and will look good on the website.
Installation process
- Download the particles.js library from the following link, unzip it, and copy it into your project folder. https://vincentgarreau.com/particles.js/
- Create two files index.html and style.css.
- import particles.js and app.js files
- Save the above code in respective files and run the 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
<!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>
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;
}