How to use Particle.js in JavaScript project ?

How to use Particle.js in JavaScript project ?

Last Updated : 02 Aug, 2024

Particles.js is a lightweight JavaScript library used for creating particles that look like the vertices of a polygon. We can also interact by hovering over the particles and creating more particles by clicking on particles. We can use this library in our portfolios which will attract many users and will look good on the website.

Installation process

Download the particles.js library from the following link, unzip it, and copy it into your project folder. https://vincentgarreau.com/particles.js/
Create two files index.html and style.css.
import particles.js and app.js files
Save the above code in respective files and run the index.html file.

Note: If you are using node app, then we can simply download particles.js node module by following command.

npm install particles.js

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>particles.js</title>

    <!-- Import style.css from root directory -->
    <link rel="stylesheet" href="./style.css" />
</head>

<body>
    <!-- Particles.js div -->
    <div id="particles-js">
        <div class="heading">
            <h1>GeeksforGeeks</h1>
            <h3>
                A computer Science 
                portal for geeks
            </h3>
        </div>
    </div>

    <!-- Import Particles.js and app.js files -->
    <script src=
        "particles.js-master/particles.js">
    </script>
    <script src=
        "/particles.js-master/demo/js/app.js">
    </script>
</body>

</html>

CSS

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Open Sans', 'Helvetica Neue', sans-serif;
}
.heading {
    position: absolute;
    text-align: center;
    top: 30%;
    width: 100%;
}
.heading h1 {
    color: limegreen;
    font-size: 70px;
}
.heading h3 {
    color: wheat;
    font-size: 20px;
}
#particles-js {
    background: black;
    height: 100vh;
}

Output:

How to use Particle.js in JavaScript project ?

M

Malhar_37

Improve

Article Tags :

Similar Reads

How to Use Particles.js in React Project ?

Particles.js is a dependency-free, light-weighted and responsive JavaScript plugin for flexible and reactive particles like design which looks like this. We can add Particles.js in our react project by using react-particles. Adding this to your react project will surely attract more audiences. 1. In

How to use Ejs in JavaScript ?

EJS or Embedded Javascript Templating is a templating engine used by Node.js. The template engine helps to create an HTML template with minimal code. Also, it can inject data into the HTML template on the client side and produce the final HTML. Installation StepsInstall the module using the followin

How to Run JavaScript in Visual Studio?

To run JavaScript in Visual Studio, you can either use Node.js in the Terminal or the Code Runner extension. Both methods allow you to execute JavaScript code easily and efficiently within the Visual Studio environment.Using Node.js in TerminalNode.js is a JavaScript runtime that allows you to execu

How to Pass variables to JavaScript in Express JS ?

Express is a lightweight framework that sits on top of Node.jsâ€™s web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your applicationâ€™s functionality with middleware and routing. When working with Express.js you may encounter scenarios where you

How much JavaScript do you need to know to use Node.js?

NodeJS has revolutionized web development by enabling developers to create powerful server-side applications using JavaScript. If you're new to NodeJS, you might wonder how much JavaScript knowledge you need to get started. In this guide, we'll explore the essential JavaScript skills required to div

How to Run or Debug JavaScript in Sublime text ?

Freeware text and source code editor Sublime Text is available for users of Windows, macOS, and Linux. Its features can be expanded with plugins, which are developed and maintained under free software licenses by the local community, and users can customize it with themes. The editor includes an eas

How to manage the packages in Node.js project ?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment built on the V8 engine and executes the JavaScript code outside the browser. When working on a project in Node.js, you may write code to achieve a specific functionality or to solve a particular problem. There are som

How to pass Variable to inline JavaScript using EJS Template Engine?

In the EJS templating engine, we can pass variables to inline JS within our HTML templates. We can use the '<%= variable %>' syntax, where we can embed server-side variables directly into the client-side scripts. In this article, we will explore the detailed process to pass a variable to inlin

JavaScript | A medicine to every problem

In the world full of different languages it is quite confusing knowing that what to choose and what not to. Most of the times students want to start something but when they search they have a lot of options and a lot of technologies in the market. It is good to have options but sometimes a lot of op

How to include an external JavaScript library to ReactJS ?

JavaScript library is pre-written collection of code snippets, objects, and functions so that we can reuse the functions, objects, and code snippets to perform a common task. It is generally use as the scripts in the <script> tags. We can use different methods to include external JavaScript li