Configurable Confetti CTA Button With jQuery - confettiButton.js

confettiButton.js is a jQuery plugin that adds a configurable, random, click- or hover-triggered confetti effect to call-to-action buttons (or anything else) using CSS3 animations and transforms.

How to use it:

1. Add jQuery library and the jquery.vnm.confettiButton.css & jquery.vnm.confettiButton.js to the html page.

<link href="jquery.vnm.confettiButton.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.vnm.confettiButton.js"></script>

2. Attach the plugin to a specific element and done.

<button class="btn">Confetti Button</button>

$(function(){

  $('.btn').confettiButton();

});

3. Config the confetti effect by overriding the default settings as displayed below:

$('.btn').confettiButton({

  // the number of particles
  num: 60,

  // an array of colos
  colorArray: ['#FF5566', '#FFFFFF', '#F1C40F', '#2EBFF6', '#2ECC71'],

  // min/max distances
  minX: 5,
  minY: 5,
  maxX: 120,
  maxY: 120,

  // min/max scale levels
  minScale: 50,
  maxScale: 150,

  // animation speed
  speed: 1,

  // rotate the particles
  rotation: true,

  // appears on a hover event
  hoverOnly: false

});

---

This awesome jQuery plugin is developed by indextwo. For more Advanced Usages, please check the demo page or visit the official website.