How to add particles to your website using particle.js

I have noticed that a lot of high-end websites sometimes have particles floating around on their background. This intrigued me and I wanted to know more about this. That is when I landed upon this JavaScript library developed by Mr. Vincent Garreau. So, in this post, I am going to show you how to add particles to your website using particle.js. There is a lot of customization that can be done with this, so let us get started!

HOW TO ADD PARTICLES TO YOUR WEBSITE USING PARTICLE.JS

Firstly, open your web browser and open up Google search. Search for “particle.js” and have a look at the first two search results. The first result is the official site of the creator where he showcases how this particle effect works. However, he does also provide a download link which we are more interested in right now.

Click on this link here to redirect to his website. ( https://vincentgarreau.com/particles.js/ )

Once you have downloaded the files, quickly go ahead and have a look at the contents of the files. The only files we need for incorporating particles into our website is the app.js and the particle.js files, so quickly go ahead and copy paste them into the root directory of your webpage.

Lets now start off with the code. We need to not only use Jquery here but also incorporate the files into our HTML. Therefore, the code looks something like this:




HTML Code

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="particles-js"></div>
        <div id="wrapper">

         <!-- Insert your code here -->

        



        </div>
    

    <script src="./js/jquery.min.js"></script>
    <script src="./js/particles.js"></script>
    <script src="./js/app.js"></script>

</body>
</html>


Note that we have a few key points here. We have included a div tag with the id of particles-js. We need to include this to tell the browser that the particles will be displayed here. Furthermore, our scripts tags need to be included too. (Note the order of the tags)

Be sure to add the Jquery.min.js, particles.js and the app.js files to your project. But, there is an issue. The code would work for now, but the moment you begin to add code for the main web-page, the particles display first, and then the main content of the webpage, which is undesired. So how do we get around that? Using a little CSS magic.

Let us have a look at how the CSS must be modified for optimum results.

CSS CODE

body,html 
{
    height: 100%
}
#particles-js canvas
{
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}
#particles-js 
{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}
canvas
{
    display:block;
    position: fixed;
    z-index: -1;
}

 

What this code does is, it basically specifies that the particles should be situated as a background and not something that can tamper with the main content of the web page. Congrats, you have simulated your first particles into your web page. You can customize this to your liking by using the app.js file but I plan to cover that in another post, so stay tuned. Meanwhile, have a look at my personal website to see how I have used particle.js and my previous posts and show some love.

https://seshagopalselvakumar.github.io/

How to make a basic navigation bar using HTML and CSS


Leave a Reply

Your email address will not be published. Required fields are marked *