Learn to Code via Tutorials on Repl.it!

← Back to all posts
ParticleJS Tutorial
Nathanielx3rd

Hi all! It's me again. Today I will be teaching you how to use and set up particleJS on your website. @CodingElf66 this is for you.

Before we start you need a Html/CSS/Js repl. The second thing you need are the ParticleJS files. To get these you need to download the zip fron Github and drag them into you repl. I will guide you through the steps.

First you need to go to this url :
https://github.com/VincentGarreau/particles.js/archive/master.zip

When you enter the file will immediately download. Once it is downloaded you need to extract it.

Inside will be this folder. It has all the assets and JS. Open the folder and you will see this.

You need to select the particle.js and particle.min.js and drag and drop it into your repl, or you can upload them manually.

Next you need to add the app.js file I will show you how to find it. Go need to go in the demo folder and you will see this.

You need to go in the js folder next and you will see :

ignore the first folder and select the second item, the app.js folder. You can drag and drop it into your repl or you can upload it manually. If you followed all the steps then your repl should look like this :

Now that it is set up you can begin creating something with the resources you just added. If you don't want to do this process you can just use my script urls.

Go into your index.html and press CTRL + A or if you are on mac press COMMAND + A and then hit Backspace or delete.
Then replace it with :

Now you are set now you have to go on to your style.css file and type the following :

If you did all the steps correctly then your webpage should look like this :

If not then leave a comment with the link to your repl.

Next up we will customize the Particles, ou can customize the, speed, size, opacity, line size, line color, circle color, speed, toggle on or off the hover effect and more.

To do this we will have to go to the app.js file. If youscroll down until you see line-linked

and change the opacity to 0. This will make the particles look like snowballs. But I like to put it on 0.9 because it looks cool. I like the color at a redish but you can change it anything but for any color on app.js it has to be a hex code.
There are so many ways to customize it but it takes so long to explain all of them.

So if you want to customize it more then leave a comment asking how to customize this and I will 100% tell you how.

Hope you learned something today.

Keep on coding 🙃

Look below at the explanation

Voters
CodingElf66
Nathanielx3rd
Comments
hotnewtop
CodingElf66

But how to change the colors of the circles, like the ones in your homepage?

Nathanielx3rd

@CodingElf66 Hey I've been busy sorry for not responding. The ones on my homepage are 4 different colors. So you have to create a string with all of the colors as so.

I changed the repl to my site. You can copy all from the app.js file and paste it into your repl.

In my version I changed the color of the circles, the opacity and size of the circles. The line-linked so the speed, size, opacity, color of the line. I also changed the sped to a tiny bit slower.

CodingElf66

@Nathanielx3rd Thank you, really!

Nathanielx3rd

@CodingElf66 Sure no problem. It would be epic if you would leave the url to your project.

CodingElf66

@Nathanielx3rd Ok, I will here: https://replit.com/@CodingElf66/Crazy-Kingdom#main.py. I want to make the background Particle-JS, but it's currently not working.

Nathanielx3rd

Hey @CodingElf66 could go to your repl and on the top right corner look for this :

and click on the Invite button. Inside you will see this :

Inside here type my name and click on Invite. I will set the background to ParticleJS manually since it's a bit difficult to explain it like this.

Also I don't do python anymore (stopped learning 2 yr ago) so it will take me a sec to remember.

CodingElf66

@Nathanielx3rd It's Flask Server, which just does HTML/CSS/Java in Python,, don't worry. You don't have to worry about the Python part, just the HTML parts. And, I invited you.

CodingElf66

Thank you!

Nathanielx3rd

@CodingElf66 Your very welcome