🎉 Simple Celebrate Confetti Animation In JavaScript – Party.js

Preview:

Description:

Party.js is a JavaScript library used to create a confetti visual effect or confetti falling animation on the page.

How to use it:

1. Install and import the Party.js as an ES module.

# Yarn
$ yarn add party-js
# NPM
$ npm i party-js

import party from "party-js";

2. Or just simply insert the party.min.js script into the document.

<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>

3. Create a default Confetti Animation.

party.confetti(element);

4. Create a default sparkles animation.

party.sparkles(element);

5. Available configuration options.

party.confetti(element,{
  /**
   * Whether the debugging mode should be enabled.
   */
  debug: false,
  /**
   * The amount of gravity to apply to particles in the scene, in pixels.
   * Note that this value is positive by default, since the y-axis increases
   * downwards in a DOM.
   */
  gravity: 800,
  /**
   * The z-index to place the DOM containers at.
   */
  zIndex: 99999,
});

// or globally
party.settings.debug = true;

6. Customize the shapes:

• square
• rectangle
• circle
• roundedSquare
• roundedRectangle
• star

party.confetti(element, {
  shapes: ["square", "circle", "roundedRectangle"]
});

party.resolvableShapes["myShape"] = `<img src="myShape.png"/>`;

7. Use variations to allow the variation/customization of individual values.

party.confetti(myElement, {
  // returns a random number from min to max
  count: party.variation.range(20, 40)
});
// skews the specified value by a specified, absolute amount
party.variation.skew(value, amount);
// skews the specified value by a specified percentage
party.variation.skewRelative(value, percentage);
// returns a random sample from the given spline
party.variation.splineSample(spline);
// returns a random colour sample from the given gradient.
party.variation.gradientSample(gradient);

Changelog:

v2.2.0 (07/11/2022)

• add shape support to sparkles template

v2.1.3 (06/08/2022)

• remove source maps

v2.1.2 (10/12/2021)

• fixed the previous patch files
• added prepublish hook

v2.1.0 (10/09/2021)

• expose sparkle lifetime, organize imports

v2.1.0 (09/26/2021)

• fix container size
• removed stale
• upgrade security packages
• Feature/reduced motion
• fix container size, added dev server
• chore: update typedoc-plugin-markdown to 3.10.1
• Improve library exports
• Added generated API

v2.0.1 (09/25/2021)

• fix container size

v2.0.0 (05/13/2021)

• Feature/better emission

v2.0.0 (05/10/2021)

• improvements

v2.0.0 (04/19/2021)

• Rewritten
• Doc & Demo update

v1.0.4 (01/12/2021)

• Update party.js to keep the rendering always on top
• Add an init function

v1.0.3 (01/03/2021)

• Fixed references

v1.0.2 (01/02/2021)

• Added proper AMD/CJS/Browser loading support

11/05/2020

• v1.0.1

11/03/2020

• Added default shapes

10/30/2020

• Added color class & gradient

10/28/2020

• Added randomization function