Introduction to tsParticles
tsParticles is a powerful JavaScript library that allows you to create beautiful particle animations on your web pages. Whether you want to create interactive backgrounds, special effects, or engaging user interfaces, tsParticles provides a flexible and performant solution.
Getting Started
To use tsParticles, you first need to include the library in your project. You can do this via CDN:
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.26.0/dist/tsparticles.min.js"></script>Then, add a container div in your HTML:
<div id="particles-container"></div>Demo 1: Basic Particles
tsParticles.load("demo1", {
particles: {
number: {
value: 50,
density: {
enable: true,
area: 800
}
},
color: {
value: "#ff0000"
},
shape: {
type: "circle"
},
size: {
value: 5
},
move: {
enable: true,
speed: 2
}
}
});
Demo 2: Interactive Particles
tsParticles.load("demo2", {
particles: {
number: {
value: 80
},
color: {
value: "#0000ff"
},
links: {
enable: true,
distance: 150,
color: "#0000ff",
opacity: 0.4
},
move: {
enable: true,
speed: 3
},
interactivity: {
events: {
onHover: {
enable: true,
mode: "repulse"
}
}
}
}
});
Demo 3: Advanced Effects
tsParticles.load("demo3", {
particles: {
number: {
value: 30
},
color: {
value: ["#ff0000", "#00ff00", "#0000ff"]
},
shape: {
type: "circle"
},
size: {
value: 8,
random: {
enable: true,
minimumValue: 4
}
},
move: {
enable: true,
speed: 6
},
destroy: {
mode: "split",
split: {
count: 2,
factor: { value: 3 },
rate: { value: 10 }
}
},
collisions: {
enable: true,
mode: "destroy"
}
}
});
Key Concepts
1. Particle Properties
- number: Controls how many particles are displayed
- color: Sets particle colors (can be single color or array)
- shape: Defines particle shape (circle, square, polygon, etc.)
- size: Controls particle size and size variations
- opacity: Sets particle transparency
2. Movement
- speed: Controls how fast particles move
- direction: Sets movement direction (none, top, bottom, etc.)
- random: Enables random movement
- straight: Forces straight-line movement
3. Interactivity
- events: Define interactive behaviors (hover, click)
- modes: Set interaction types (grab, bubble, repulse)
- detect_on: Specify event detection (window or canvas)
Advanced Features
Collision Detection
Particles can interact with each other through collisions:
collisions: {
enable: true,
mode: "bounce" // or "destroy"
}
Particle Splitting
Particles can split into smaller particles on collision:
destroy: {
mode: "split",
split: {
count: 2,
factor: { value: 3 },
rate: { value: 10 }
}
}
Custom Shapes
You can define custom shapes using images or SVGs:
shape: {
type: "image",
image: {
src: "path/to/image.png",
width: 100,
height: 100
}
}
