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 :
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.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
A or if you are on mac press
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
@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.
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.