Skip to content
Related Articles

Related Articles

Improve Article

How to use Particle.js in JavaScript project ?

  • Last Updated : 18 Aug, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :