🎉 Simple Celebrate Confetti Animation In JavaScript – Party.js

Category: Animation , Javascript , Recommended | July 11, 2022
Author:YilianSource
Views Total:8,029 views
Official Page:Go to website
Last Update:July 11, 2022
License:MIT

Preview:

🎉 Simple Celebrate Confetti Animation In JavaScript – Party.js

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

You Might Be Interested In:


Leave a Reply