February 27, 2022
A nice library for creating confetti on a page is canvas-confetti
. Here’s how to use it:
First, install the package from npm by running this in the terminal:
npm install canvas-confetti
Alternatively, you can load the package using a <script>
tag in your HTML, like this:
<script src="https://unpkg.com/[email protected]/dist/confetti.browser.js"></script>
That’s all! Now, all you need to trigger a burst of confetti in the middle of the screen is:
// This is JavaScript, so either in a .js file or within <script></script>.
confetti()
That’s all it takes! Let’s look into some customizations we can make:
Often, we want the confetti to originate from a specific place on the page.
Here’s an example of how we can make the confetti shoot from the center of an element on the page.
// Let's say we want to shoot the confetti out of
// the middle of an element with id="my-element".
const element = document.querySelector('#my-element')
// Get the position of the element (in pixels) within on the page.
const { top, bottom, left, right } = element.getBoundingClientRect()
confetti({
origin: {
// We calculate the center of the element by
// averaging the left/right and top/bottom pixel values.
// The confetti() function expects measurements to be
// given from 0 to 1, where 0 is the top/left and
// 1 is the bottom/right of the page. Therefore we divide
// by the the window's width or height to get a decimal
// between 0 and 1.
x: ((left + right) / 2) / window.innerWidth,
y: ((top + bottom) / 2) / window.innerHeight
}
})
If we want more confetti to spray, we can adjust the particleCount
option. We can also change how far the confetti spreads out (and therefore how much it overlaps) by adjusting the spread
option.
confetti({
particleCount: 100, // Defaults to 50 particles
spread: 60 // Defaults to 45º spread
})
By default, the confetti goes upwards. We can change the direction in which it shoots by changing the angle
option:
// Angle defaults to 90º, or upwards.
// 0º means shooting towards the right.
confetti({
angle: 0
})
You can see all the other options for customizing confetti()
in the documentation for canvas-confetti
.
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects I’m working on!