Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use Particle.js in JavaScript project?
Particle.js is a JavaScript library that creates stunning visual effects by adding animated particles to HTML elements. You can customize particle shapes, colors, motion, and interactions to enhance your web projects with dynamic backgrounds and visual effects.
This library is perfect for creating engaging landing pages, interactive backgrounds, and modern web interfaces with floating particles that respond to user interactions.
Syntax
The basic syntax to initialize particles using the tsParticles library:
tsParticles.load("elementId", {
particles: {
// Configuration options for particles
number: { value: 100 },
color: { value: "#ffffff" },
shape: { type: "circle" },
move: { enable: true }
}
});
The first parameter is the ID of the HTML element where particles will be rendered, and the second parameter is the configuration object.
Basic Particle Setup
Here's how to create a simple particle system with 500 particles in a gray background:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"></script>
<style>
#tsparticles {
width: 100%;
height: 100vh;
background-color: #333;
}
</style>
</head>
<body>
<div id="tsparticles">
<h2 style="color: white; text-align: center; padding: 50px;">
Basic Particle.js Demo
</h2>
</div>
<script>
tsParticles.load("tsparticles", {
particles: {
number: {
value: 500
},
color: {
value: "#ffffff"
},
size: {
value: 3
}
}
});
</script>
</body>
</html>
Adding Motion and Colors
This example demonstrates how to add movement and custom colors to particles:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"></script>
<style>
#particles {
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
</head>
<body>
<div id="particles">
<h2 style="color: white; text-align: center; padding: 50px;">
Animated Colored Particles
</h2>
</div>
<script>
tsParticles.load("particles", {
particles: {
number: {
value: 150
},
move: {
enable: true,
speed: 2
},
color: {
value: ["#ff6b6b", "#4ecdc4", "#45b7d1", "#f9ca24"]
},
size: {
value: 4,
random: true
}
}
});
</script>
</body>
</html>
Available Particle Shapes
Particle.js supports various shapes for creating different visual effects:
- "circle" - Default circular particles
- "triangle" - Triangular shapes
- "polygon" - Multi-sided polygons
- "square" - Square particles
- "star" - Star-shaped particles
- "image" - Custom image particles
- "char" - Character/text particles
Advanced Shape Animation
This example shows polygon particles with size animation and enhanced movement:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"></script>
<style>
#particles {
width: 100%;
height: 100vh;
background: radial-gradient(circle, #1a1a2e, #16213e);
}
</style>
</head>
<body>
<div id="particles">
<h2 style="color: white; text-align: center; padding: 50px;">
Animated Polygon Particles
</h2>
</div>
<script>
tsParticles.load("particles", {
particles: {
number: {
value: 80
},
move: {
enable: true,
speed: 3,
direction: "none",
outMode: "bounce"
},
color: {
value: "#0f4c75"
},
shape: {
type: "polygon",
polygon: {
sides: 6
}
},
size: {
value: 8,
random: true,
animation: {
enable: true,
speed: 5,
minimumValue: 3,
sync: false
}
}
}
});
</script>
</body>
</html>
Installation Options
You can use Particle.js in several ways:
| Method | Usage | Best For |
|---|---|---|
| CDN | Include script tag in HTML | Quick prototypes, simple projects |
| NPM | npm install tsparticles |
Node.js applications, build tools |
| Download | Host library files locally | Offline projects, custom hosting |
Key Configuration Properties
Essential properties for customizing particles:
- number.value - Controls particle count
- move.enable - Enables/disables particle movement
- move.speed - Sets movement speed
- color.value - Defines particle colors
- size.value - Sets particle size
- size.animation - Animates size changes
- shape.type - Defines particle shape
Conclusion
Particle.js is a powerful library for creating engaging visual effects with minimal code. By configuring properties like number, movement, colors, and shapes, you can create stunning animated backgrounds that enhance user experience and add modern visual appeal to your web projects.
2K+ Views
