- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use Particle.js in JavaScript project?
As the name suggests, the Particle.js library allows us to add particles to a particular HTML element. Also, we can change the shape of the particles number of particles in the div.
We can add animation or motion to particles using the Particle.js library. Here, we will learn to change the shape, colour, and motion of particles via different examples.
Syntax
Users can follow the syntax below to use the Particle.js library in a JavaScript project.
tsParticles.load("id", {
particles: {
// properties for the particles
}
});
In the above syntax, id represents the id of the div element in which we need to add the particles.
Example
In the example below, we have used the Particles.JS library using the CDN in the <head> tag. We created the <div> element and assigned the id in the HTML body.
In JavaScript, we have added the tsparticles.load() method to load particles. As a first parameter of the load() method, we have passed the id of the div element. We passed the object as a second parameter containing the particle property.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
<style>
#tsparticles {
width: 100%;
height: 100%;
background-color: grey;
}
</style>
</head>
<body>
<div id = "tsparticles">
<h2> Using the <i> particle.js library </i> in the JavaScript project. </h2>
</div>
<script>
tsParticles.load("tsparticles", {
particles: {
number: {
value: 500
},
}
});
</script>
</body>
</html>
In the output, users can observe the particles in the div element.
The example below will add motion and colours to the particles. Users can use the move property to move particles. The ‘move’ property takes the value as an object containing the enabled property with the boolean value.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
<style>
#particles {
width: 100%;
height: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id = "particles">
<h2> Using the <i> particle.js library </i> in the JavaScript project. </h2>
</div>
<script>
tsParticles.load("particles", {
particles: {
number: {
value: 1000
},
move: {
enable: true
},
color: {
value: "#272701"
},
}
});
</script>
</body>
</html>
Users can use the colour property to change the colour of the particle containing the object as a value.
Users can use the below particles of the below shapes from the Particle.JS library.
"polygon"
"triangle"
"circle"
"edge" / "square"
"image" / "images"
"star"
"char" / "character"
Example
In the example below, we have added the polygon shape to the particles. Also, we have changed the size of the particles using the size property. Furthermore, we have added animation to the particles themselves, increasing and decreasing the size of particles which users can observe in the output.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
<style>
#particles {
width: 100%;
height: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id = "particles">
<h2>Using the <i> particle.js library </i> in the JavaScript project. </h2>
</div>
<script>
tsParticles.load("particles", {
particles: {
number: {
value: 1000
},
move: {
enable: true
},
color: {
value: "#ff0342"
},
// adding shape of particles
shape: {
type: "polygon",
},
// changing the size of elements
size: {
value: 8,
random: true,
animation: {
enable: true,
speed: 40,
sync: true
},
move: {
enable: true,
},
}
}
});
</script>
</body>
</html>
Users learned to use the particles.js library in the JavaScript project. However, users can install the particle.js library on the local computer and import using the path. Whenever the user wants to use the Particle.js library with the NodeJS application, they should install it using the NPM command.
1K+ Views
