Playing with Particles.js

Hello! I heard a lot of people trying out particles.js while many of them asked me about its implementation with HTML/CSS. Let’s together figure it out today!

Firstly, download the js folder from the Github Repository (PS:- You can always clone the whole thing for reference 😉)

Now make an index.html file, to write your main page and style.css to add styling to your page. I have written something like this —

Be careful with the id of the div and the script included in the index.html file. Also, taking care of the CSS for it is important.

Now, your website on the localhost with look like this —

But hey! particles.js isn’t restricted to this. You can change many elements in the particles like -

➡ Color, Shape and Size of particles
➡ Speed
➡ Direction
➡ Count
➡ OnHover and OnClick effect

All these changes can be done in app.js in the js folder following the JSON format!

If you want to learn more precisely and accurately, check out the original repository by VincentGarreau.

I hope you will fall in love with ParticlesJs. Feel free to ping me on LinkedIn in case you have any doubts!