Skip to content
Sign upLog in
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs
3

ParticleJS Tutorial

Nathanielx3rd
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.

image

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

image

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.

image

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

image

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 :

image

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 :

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Testing</title> </head> <body id="particles-js"> <p>Hello World</p> <script src="https://particlesjs.nathanielx3rd.repl.co/particles.js"></script> <script src="app.js"></script> </body> </html>

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

body { color: white; height: 100vh; } #particles-js { height: 100%; background: black; }

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

image

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

image

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

1 year ago
You are viewing a single comment. View All
1