How to use Particle.js in JavaScript project ?

Last Updated : 02 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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
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>
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;
}

Output:


Next Article
How to use Ejs in JavaScript ?

M
Malhar_37
Improve
Article Tags :

Similar Reads