ovniroto / confettis

Yep, confettis! πŸŽ‰

Home Page:https://confettis.ovni.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Confettis

NPM GitHub Issues GitHub Tag GitHub Commits GitHub License

πŸŽ‰ 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

confettis.ovni.dev

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 confettis
import * 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.

About

Yep, confettis! πŸŽ‰

https://confettis.ovni.dev

License:MIT License


Languages

Language:JavaScript 72.4%Language:TypeScript 27.6%