DEV Community

Cover image for How to use particles.js
Aman Singh
Aman Singh

Posted on • Updated on

How to use particles.js

What is particles.js?
As is evident from the name, it is a JavaScript library that can help you create particle systems. Moreover, it is lightweight, easy to use, and gives you a lot of control.

⭐ Create a folder :

  1. Inside the folder create an index.html file.

  2. Inside this HTML file create a div with the id of particles-js.

div

  1. Search partilces.js on your web browser.
    (https://vincentgarreau.com/particles.js/).

  2. Visit the official GitHub repo of the particles.js
    (https://github.com/VincentGarreau/particles.js).

  3. Download these files from the repo or clone the repo.
    πŸ‘‰ paricles.js
    πŸ‘‰ app.js
    πŸ‘‰ particles.json

  4. Create a CSS file styles.css

  5. Add this CSS :

css

  1. Link these style sheets and scripts into index.html (The sequence of the script files should be the same). πŸ‘‰ style.css πŸ‘‰ particles.js πŸ‘‰ app.js links
  2. Run index file (open index file on the browser).

  3. If still not working properly then watch this
    video: https://youtu.be/cUzihD4JBQU

Thank you πŸ’–

Oldest comments (2)

Collapse
 
matteobruni profile image
Matteo Bruni
Collapse
 
aman2221 profile image
Aman Singh

Wow,
it's great
thanks for sharing