The new confetti shape
With tsParticles you can create a lot of particles configurations with circles, squares, images, text, polygons, hearts, spirals and other shapes, and you can create yours too.
Some days ago I released the new shape confetti to create beautiful confetti animations with tsParticles so you can keep your config and just change shape to see them appear.
Let's see how to achieve it.
Vanilla JS setup
Let's start with the standard HTML/CSS/JavaScript static website.
<!-- tsParticles div container -->
<div id="tsparticles"></div>
<!-- tsParticles main script -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tsparticles@1.22.1"></script>
<!-- tsParticles confetti shape script -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tsparticles-shape-confetti@1.7.1"></script>
As always you just need your loyal tsparticles
div in your page. The id
attribute is set to tsparticles
here but you can set to any value you want.
/* what no css needed? π€― */
If you remember tsParticles have introduced a fullScreen
option, if you never used that don't worry. It will be explained now.
// the tsParticles loading script
tsParticles.load("tsparticles", {
fullScreen: {
enable: true
},
particles: {
number: {
value: 0 // no starting particles
},
color: {
value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"] // the confetti colors
},
shape: {
type: "confetti", // the confetti shape
options: {
confetti: { // confetti shape options
type: ["circle", "square"] // you can only have circle or square for now
}
}
},
opacity: {
value: 1, // confetti are solid, so opacity should be 1, but who cares?
animation: {
enable: true, // enables the opacity animation, this will fade away the confettis
minimumValue: 0, // minimum opacity reached with animation
speed: 2, // the opacity animation speed, the higher the value, the faster the confetti disappear
startValue: "max", // start always from opacity 1
destroy: "min" // destroy the confettis at opacity 0
}
},
size: {
value: 7, // confetti size
random: {
enable: true, // enables a random size between 3 (below) and 7 (above)
minimumValue: 3 // the confetti minimum size
}
},
life: {
duration: {
sync: true, // syncs the life duration for those who spawns together
value: 5 // how many seconds the confettis should be on screen
},
count: 1 // how many times the confetti should appear, once is enough this time
},
move: {
enable: true, // confetti need to move right?
gravity: {
enable: true, // gravity to let them fall!
acceleration: 20 // how fast the gravity should attract the confettis
},
speed: 50, // the confetti speed, it's the starting value since gravity will affect it, and decay too
decay: 0.05, // the speed decay over time, it's a decreasing value, every frame the decay will be multiplied by current particle speed and removed from that value
outModes: { // what confettis should do offscreen?
default: "destroy", // by default remove them
top: "none" // but since gravity attract them to bottom, when they go offscreen on top they can stay
}
}
},
background: {
color: "#000" // set the canvas background, it will set the style property
},
emitters: [ // the confetti emitters, the will bring confetti to life
{
direction: "top-right", // the first emitter spawns confettis moving in the top right direction
rate: {
delay: 0.1, // this is the delay in seconds for every confetti emission (10 confettis will spawn every 0.1 seconds)
quantity: 10 // how many confettis must spawn ad every delay
},
position: { // the emitter position (values are in canvas %)
x: 0,
y: 50
},
size: { // the emitter size, if > 0 you'll have a spawn area instead of a point
width: 0,
height: 0
}
},
{
direction: "top-left", // same as the first one but in the opposite side
rate: {
delay: 0.1,
quantity: 10
},
position: {
x: 100,
y: 50
},
size: {
width: 0,
height: 0
}
}
]
});
Yes, thanks a lot of code but I want to see confetti!! π
ReactJS / PreactJS / InfernoJS
As you know tsParticles has React/Preact/Inferno components ready to be used.
I'll include a React CodeSandbox below with the same working configuration that you saw above:
To use it with Preact and Inferno just use your preferred library and component.
Let's just explain what's the difference from Vanilla JavaScript:
First of all you need to install react-tsparticles
(or its equivalent package for Preact or Inferno) and the confetti shape tsparticles-shape-confetti
npm install react-tsparticles tsparticles-shape-confetti
or
yarn add react-tsparticles tsparticles-shape-confetti
Then in your React-like code:
import Particles from "react-tsparticles"; // import the tsParticles component
import { loadConfettiShape } from "tsparticles-shape-confetti"; // import the confetti shape
const loadConfetti = (tsparticles) => {
loadConfettiShape(tsparticles);
}; // create a function that loads the confetti shape in the tsParticles instance
Then just configure the <Particles />
component:
<Particles
id="tsparticles"
init={loadConfetti}
options={{ /* omitted for brevity, it's the same written before */ }} />
Angular
Here you can see a working sample made using Angular, the dependencies are similar to the React sample, just use ng-particles
instead of react-tsparticles
.
Vue.js
And here you can see a working sample made using Vue.js, the right package this time is particles.vue
for Vue.js 2 or particles.vue3
for Vue.js 3.
In the eeeeeeeend
It doesn't even matter...
Ops sorry... If you like tsParticles please support the repository with a small star βοΈ on GitHub
matteobruni
/
tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!
Particles.js converted in TypeScript, dependency free (*), improved with new cool
Do you want to use it on your website?
This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.
You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.
The output files are just JavaScript.
CDNs and npm
have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import
syntax.
If you are still interested some lines below there are some instructions for migrating fromβ¦
Discussion (0)