https://github.com/amyx000/burst-confetti
https://github.com/amyx000/burst-confetti
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/amyx000/burst-confetti
- Owner: Amyx000
- Created: 2024-12-03T09:51:05.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-03T10:06:37.000Z (6 months ago)
- Last Synced: 2025-02-02T09:13:29.260Z (4 months ago)
- Language: TypeScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Confetti Animation Library 🎉
A lightweight and customizable library to create confetti animations using JavaScript. You can use it to add a fun and engaging confetti effect to any element on your webpage.
---
## Features
- Easy to integrate.
- Customizable properties such as confetti size, velocity, and spin.
- Supports multiple confetti images.
- Works with any CSS selector (`body`, `#id`, `.class`).
---
## Installation
Add the script file to your project:
```javascript
import { createConfettiInstance } from './index';
```
## Usage
### Step 1: Create an Instance
Use the `createConfettiInstance` function to initialize the confetti animation.
```javascript
const confetti = createConfettiInstance({
selector: 'body', // CSS selector for the parent element
position: { x: window.innerWidth / 2, y: window.innerHeight / 2 }, // Confetti origin
images: ['confetti1.png', 'confetti2.png', 'confetti3.png'], // Array of image URLs
});
```
### Step 2: Trigger the Confetti
Call the generate() method to start the animation.
```javascript
confetti.generate().then(() => {
console.log('Confetti animation completed!');
});
```
## Configuration Properties
| Property | Type | Description | Default |
|--------------------|-------------|----------------------------------------------------------------------------------------------|------------------------------|
| `selector` | `string` | CSS selector for the element where the confetti will be appended (e.g., `body`, `.class`, `#id`). | **Required** |
| `position` | `object` | Origin point for confetti, with `x` and `y` coordinates as numbers. | **Required** |
| `images` | `string[]` | Array of URLs pointing to confetti images. | **Required** |
| `sizes` | `number[]` | Array of possible sizes for confetti particles (in pixels). | `[10, 15, 20, 25, 30, 35]` |
| `limit` | `number` | Maximum number of confetti particles to generate at a time. | `50` |
| `yVelocityMax` | `number` | Maximum vertical velocity for confetti particles. | `40` |
| `xVelocityMax` | `number` | Maximum horizontal velocity for confetti particles. | `15` |
| `spinVelocityMax` | `number` | Maximum rotational velocity (spin speed) for confetti particles. | `35` |