tsParticles recently has been updated to version 1.30
with new beautiful and realistic confetti animations.
They are awesome but there's a lot to configure, right?
Don't worry, there's a simpler way using the tsParticles confetti preset.
Here a sample starting the animation when a button is clicked
tsparticles / tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- β¦
How to use it
CDN / Vanilla JS / jQuery
The first step is installing tsParticles following the instructions for
vanilla javascript in the main project here
Once added the script you need one more script to be included in your page (or you can download that
from jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/tsparticles"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-confetti"></script>
Or
javascript
import { tsParticles } from "tsparticles";
import { loadConfettiPreset } from "tsparticles-preset-confetti";
This script MUST be placed after the tsParticles
one.
Bundle
A bundled script can also be used, this will include every needed plugin needed by the preset.
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-confetti/dist/tsparticles.preset.confetti.bundle.min.js"></script>
Usage
Once the scripts are loaded you can set up tsParticles
like this:
loadConfettiPreset(tsParticles);
tsParticles.load("tsparticles", {
preset: "confetti",
});
Alternative Usage
This module exports another method for using the confetti preset
confetti("tsparticles", {
/**
* @deprecated use count property instead
*/
particleCount: 50,
/**
* @deprecated use position property instead
*/
origin: {
x: 50,
y: 50,
},
//------------------------------------------
angle: 90,
count: 50,
position: {
x: 50,
y: 50,
},
spread: 45,
startVelocity: 45,
decay: 0.9,
gravity: 1,
drift: 0,
ticks: 200,
colors: ["#ffffff", "#ff0000"],
shapes: ["square", "circle"],
scalar: 1,
zIndex: 100,
disableForReducedMotion: true,
});
This function is available for import
too in the tsparticles-preset-confetti
package
This method doesn't need to call the loadConfettiPreset
method since it's called automatically.
Options
The confetti
first parameter is the tsParticles
container id and the second parameter is a single options
object,
which has the following properties:
-
count
Integer (default: 50): The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved. (particleCount
can be used too, but it's deprecated) -
angle
Number (default: 90): The angle in which to launch the confetti, in degrees: 90 is straight up. -
spread
Number (default: 45): How far off center the confetti can go, in degrees. 45 means the confetti will launch at the definedangle
plus or minus 22.5 degrees. -
startVelocity
Number (default: 45): How fast the confetti will start going, in pixels. -
decay
Number (default: 0.9): How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it. -
gravity
Number (default: 1): How quickly the particles are pulled down: 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like. -
drift
Number (default: 0): How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right. -
ticks
Number (default: 200): How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you. -
position
Object: Where to start firing confetti from. Feel free to launch off-screen if you'd like. (origin
can be used too, but it's deprecated)-
position.x
Number (default: 0.5): Thex
position on the page, with0
being the left edge and1
being the right edge. -
position.y
Number (default: 0.5): They
position on the page, with0
being the top edge and1
being the bottom edge.
-
-
colors
Array<String>: An array of color strings, in the HEX format... you know, like#bada55
. -
shapes
Array<String>: An array of shapes for the confetti. The possible values aresquare
andcircle
. The default is to use both shapes in an even mix. You can even change the mix by providing a value such as['circle', 'circle', 'square']
to use two third circles and one third squares. -
scalar
Number (default: 1): Scale factor for each confetti particle. Use decimals to make the confetti smaller. Go on, try teeny tiny confetti, they are adorable! -
zIndex
Integer (default: 100): The confetti should be on top, after all. But if you have a crazy high page, you can set it even higher. -
disableForReducedMotion
Boolean (default: true): Disables confetti entirely for users that prefer reduced motion.
Customization
Important β οΈ
You can override all the options defining the properties like in any standard tsParticles
installation. This works
only with the classic loadConfettiPreset
method, the confetti
function has its own parameters.
tsParticles.load("tsparticles", {
particles: {
color: {
value: ["#0000ff", "#00ff00"],
},
},
preset: "confetti",
});
Like in the sample above, the white and red colors will be replaced by blue and lime.
React.js / Preact / Inferno
The syntax for React.js
, Preact
and Inferno
is the same.
This sample uses the class component syntax, but you can use hooks as well (if the library supports it).
import Particles from "react-tsparticles";
import { Main } from "tsparticles";
import { loadConfettiPreset } from "tsparticles-preset-confetti";
export class ParticlesContainer extends React.PureComponent<IProps> {
// this customizes the component tsParticles installation
customInit(main: Main) {
// this adds the preset to tsParticles, you can safely use the
loadConfettiPreset(main);
}
render() {
const options = {
preset: "confetti",
};
return <Particles options={options} init={this.customInit} />;
}
}
Vue (2.x and 3.x)
The syntax for Vue.js 2.x
and 3.x
is the same
<Particles id="tsparticles" :particlesInit="particlesInit" url="http://foo.bar/particles.json" />
function particlesInit(main: Main) {
loadConfettiPreset(main);
}
Angular
<ng-particles
[id]="id"
[options]="particlesOptions"
(particlesLoaded)="particlesLoaded($event)"
(particlesInit)="particlesInit($event)"
></ng-particles>
function particlesInit(main: Main): void {
loadConfettiPreset(main);
}
Svelte
<Particles
id="tsparticles"
url="http://foo.bar/particles.json"
on:particlesInit="{onParticlesInit}"
/>
let onParticlesInit = (main) => {
loadConfettiPreset(main);
};
Top comments (7)
Hello Matteo Bruni
I hope all is well your [JS] How to create confetti animations using a button with tsParticles π is the best but i want to use this code in quiz so how is it possible and I'm using blogger
please help me
You can see this sample: codepen.io/matteobruni/pen/rNjLBoY
It starts and stops the animation manually
Friend how to add this code in blogger .. help me
I don't know, I've never used Blogger. Sorry
Hello Matteo Bruni ..
Thank for your reply π .. If you know about how to add sound track in quiz when click in options like - correct or wrong sound effects .. please help me
I've never used sounds in web apps, try asking on Stack Overflow
Thank you for your reply .. keep it up