🎉 Simple Celebrate Confetti Animation In JavaScript – Party.js

Category: Animation , Javascript , Recommended | November 5, 2020
Author: YilianSource
Views Total: 476 views
Official Page: Go to website
Last Update: November 5, 2020
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. To install the library, just simply insert the party.min.js script into the document.

<script src="./party.min.js"></script>

2. Spawns particles (confetti) from the mouse position retrieved from the current cursor event. Note that this function HAS to be called inside a cursor event handler (mouseover, etc.) to work.

party.cursor({
  count: 40,
  countVariation: 0.5,
  angleSpan: 80,
  yVelocity: -300,
  yVelocityVariation: 1,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

3. Spawns particles from a specified HTML element.

party.element(document.getElementById("selector"), {
  count: 40,
  countVariation: 0.5,
  angleSpan: 80,
  yVelocity: -300,
  yVelocityVariation: 1,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

4. Spawns particles from a specified position, relative to the viewport.

party.position(x, y,  {
  count: 40,
  countVariation: 0.5,
  angleSpan: 80,
  yVelocity: -300,
  yVelocityVariation: 1,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

5. Create a confetti falling animation:

party.screen({ 
  count: 500 * (window.innerWidth / 1980),
  countVariation: 0.5,
  angleSpan: 0,
  yVelocity: -100,
  yVelocityVariation: 2,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

Changelog:

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