Press "Enter" to skip to content

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti!

How to make use of it:

1. To set up the library, simply merely insert the celebration.min.js script into the doc.

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

2. Spawns particles (confetti) from the mouse place retrieved from the present cursor event.

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 component.

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 confetti falling animation:

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

Simple Celebrate Confetti Animation In JavaScript, party JS Plugin/Github


See Demo And Download

Official Website(YilianSource): Click Here

This superior jQuery/javascript plugin is developed by YilianSource. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *