0.3.4 • Published 2 months ago
confettis v0.3.4
🎉 Confettis v0.3.4
Confettis is a small lib to add confettis to your website. Yep, confettis! 🎉
- 😊 SSR Support
- 🎉 Common confettis
- 👽 Emoji coffetis
- ⭐️ Star confettis
- 🟡 Circle confettis (snow?)
- ✨ Confettis with different sizes
- 🗿 Static or moving confettis
- 😄 Super easy to use!
Demo
Resources
Installation
Browser:
<script src="https://cdn.jsdelivr.net/npm/confettis@0.3.4/lib/confettis.min.js"></script>Deno:
import * as confetti from 'https://esm.sh/confettis@0.3.4'Node:
$ npm i confettisimport * as confetti from 'confettis'Usage
Basic usage
confetti.create()Advanced usage
confetti.create({
x: 0.5,
y: 0.7,
count: 500,
ticks: -1,
gravity: [ 0.7, 1.2 ],
speed: [ 35, 45 ],
scale: [ 0.7, 0.8 ],
decay: 0.91,
shapes: [ 'square', 'ellipse' ]
})This is just an example, but you can do anything. I recommend you look at the examples I have put on the web! See more examples here!
Parameters
When creating a new confetti you can change the parameters to change the position, particle count, angle, gravity, etc.
| Option | Type | Default | Description |
|---|---|---|---|
canvas | string | confettis | Id of canvas where you are going to show the confetti. If you do not put anything, a canvas will be created with id "confettis". |
count | number | 100 | Number of confetti to launch. Remember that the more particles the web performance will be worse. The recommended is between 1 and 300 particles per second. |
x | number | 0.5 | The X position is horizontal, being 0 the left edge and 1 the right edge. |
y | number | 0.7 | The Y position is vertical, being 0 the upper edge and 1 the lower edge. |
z | number | MAX_SAFE_INTEGER | The Z position on the page (z-index). Determine whether it is shown above or below other web elements. The higher the number, it will be shown above all (recommended). Default is Number.MAX_SAFE_INTEGER (2147483647) to overcome the height of most popular UI libs. |
gravity | number or [number] | 1 | Gravity determine how quickly the confetti will fall. You can play with this parameter to make it fall faster or slower, and you can even make the confetti rise up. |
ticks | number or [number] | 300 | Time that confetti will take to disappear (opacity). The higher the number, it will take longer to disappear. Put it in -1 to deactivate it and make it always visible. |
speed | number or [number] | 45 | Speed with which the confetti will begin to move. |
scale | number or [number] | 0.8 | Scale factor for each confetti particle. Use decimals to make the confetti smaller. Example: 0.8, 1, 1.3 |
overflow | object | Prarameter to allow confetti particle exceed the canvas without being deleted | |
overflow.left | boolean | false | When set to true allows the left overflow |
overflow.right | boolean | false | When set to true allows the right overflow |
overflow.top | boolean | true | When set to true allows the top overflow |
overflow.bottom | boolean | false | When set to true allows the bottom overflow |
decay | number | 0.92 | Determine the speed with which the confetti will lose speed. Keep this number between 0 and 1 so that the confetti does not go to the speed of light. |
drift | number | 0 | Determine the side where the confetti will go. 0 indicates that it will fall down. A negative number indicates that it will go to the left, and a positive number indicates that it will go to the right. |
angle | number | 90 | The angle at which the confetti is going to be released. In degrees (0-360) |
spread | number | 70 | How far the confetti can come. In degrees (0-360) |
quiet | boolean | false | It allows to create static confetti. Perfect if you want square or ellipse confetti without moving when falling. |
colors | [string] | Array with strings of the colors you want to show the confetti. The colors must be in Hex format (#ffffff). | |
shapes | [string] | An array of shapes for the confetti. | |
emojis | [string] | An array of emojis for the confetti. |
Accepted shapes
| Shape | Description |
|---|---|
square | Create common square confetti. |
ellipse | Create confetti in the form of ellipse. |
circle | Create confetti in the form of a circle. |
star | Create confetti in the form of star with five spikes. |
emoji | Create confetti with emojis. |
Contributors
All issue reports, feature requests, pull requests and github stars are welcomed and much appreciated.
Thanks
Special thanks to catdad for canvas-confetti. I have created this project as inspiration to obtain a cleaner and legible code in typescript, and add extra functions.