CodePen Embed - Confetti Generator with JS

<div class="site-canvas">
  <div class="intro">
    <div class="confetti"></div>
    <div class="title">
      <h1>JS Confetti</h1>
      <h2>Web version of the awesome <a href="http://www.sketchconfetti.com/" target="_blank">Confetti</a> plugin for sketch.</h2>
      <div class="button">Generate</div>
      <div class="button">Settings</div>
      <div class="button">Save PNG</div>
    </div>
  </div>
</div>
<div class="settings">
  <h3>Configure your confetti <span class="close"></span></h3>
  <div class="field half">
    <label for="rows">Rows</label>
    <input type="number" name="rows" value="5" />
  </div>
  <div class="field half">
    <label for="rows">Columns</label>
    <input type="number" name="columns" value="5" />
  </div>
  <div class="field full">
    <input type="checkbox" name="opacity" checked="true" value="true" />
    <label for="randomOpacity">Random Opacity</label>
  </div>
  <div class="field full">
    <input type="checkbox" name="size" checked="true" value="true" />
    <label for="randomSize">Random Size</label>
  </div>
  <div class="field full">
    <input type="checkbox" name="rotation" checked="true" value="true" /><label for="randomRotation">Random Rotation</label>
    
  </div>
</div>
<footer>
  Made with <i class="fa fa-heart"></i>
  <span>Want to buy me a beer? 3DuWe7JNHcJXDJknGWEewLrC712menPQka</span>
</footer>

body {
  font-family:'Source Sans Pro';
  overflow:hidden;
}
h1 {
  font-family:'Montserrat';
  font-size:6.2em;
  text-shadow:0 2px 6px rgba(0,0,0,0.2);
}
h2 {
  font-size:1.45em;
}

footer {
  position:fixed;
  left:10px;
  right:10px;
  bottom:10px;
  color:rgba(255,255,255,0.6);
}

footer:hover {
  color:#fff;
}

footer span {
  float:right;
}

.site-canvas {
  position:relative;
  text-align:center;
}
.intro {
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  color:#fff;
  overflow:hidden;
}
.title {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:190px;
}
.title a {
  color:#fff;
  border-bottom:1px solid #fff;
  text-decoration:none;
}

.button {
  margin:50px 10px 0;
  width:160px;
  height:50px;
  line-height:50px;
  background:#fff;
  color:#8C1A6A;
  font-size:1.2em;
  font-weight:700;
  border-radius:25px;
  text-align:center;
  box-shadow:0 10px 20px -5px rgba(0,0,0,0.2);
  transition:0.05s ease-in-out;
  display:inline-block;
  user-select:none;
  cursor:pointer;
}
.button:hover {
  transform:scale(0.95);
}

.confetti {
  position:fixed;
  margin:auto;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(36deg, #8C1A6A, #FF0054);
}
.confetti-cell {
  position:absolute;
  top:0;
  left:0;
  width:20%;
  height:20%;
  opacity:0;
  animation:350ms fadeIn cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode:forwards;
}

.icon {
  position:absolute;
  top:0;
  left:0;
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:contain;
  width:50px;
  height:50px;
  display:block;
  filter:invert(1);
}
.icon.i1 {
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_cloud.svg);
}
.icon.i2 {
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_headphones.svg);
}
.icon.i3 {
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_heart.svg);
}
.icon.i4 {
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_like.svg);
}
.icon.i5 {
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_sun-cloud.svg);
}

.settings {
  position:fixed;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:550px;
  height:330px;
  border-radius:15px;
  background:#fff;
  overflow:hidden;
  opacity:0;
  transform:scale(0.8) translate3d(0,-80px,0);
  display:none;
  animation:350ms fadeIn cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode:forwards;
}
@keyframes fadeIn {
  100%{
    opacity:1;
    transform:scale(1) translate3d(0,0,0);
  }
}
.settings h3 {
  margin:0 0 20px;
  padding:20px;
  font-size:1.6em;
  font-weight:700;
  color:#8C1A6A;
  background:rgba(0,0,0,0.05);
}
.settings h3 span {
  position:relative;
  width:30px;
  height:30px;
  float:right;
  display:block;
  cursor:pointer;
}
.settings h3 span:before,
.settings h3 span:after {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:30px;
  height:2px;
  background:#8C1A6A;
  transform:rotate(45deg);
  content:'';
}
.settings h3 span:after {
  transform:rotate(-45deg);
}
.settings .field.half {
  margin:0 20px 20px;
  float:left;
}
.settings .field label {
  margin-bottom:10px;
  font-size:1.4em;
}
.settings .field.half input {
  width:235px;
  height:40px;
  padding:10px;
  font-size:18px;
  border-radius:4px;
  border:1px solid #e1e1e1;
  box-sizing:border-box;
}
.settings .field.half input:focus {
  outline:0 solid transparent;
  border-color:#8C1A6A;
}
.settings .field.half label {
  display:block;
}

.settings .field {
  margin:20px;
}

.settings .field.full label {
  margin-left:10px;
  display:inline-block;
}

input[type=checkbox] {
  width:20px;
  height:20px;
  display:inline-block;
}

(function(){
  
  var confetti = {
    rows: 6,
    columns: 6,
    randomOpacity: true, // 70% - 100%
    randomSize: true,
    randomRotation: true,
    iconURLs: [
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_cloud.svg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_headphones.svg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_heart.svg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_like.svg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/363972/nc-test-outline-64px_sun-cloud.svg'
    ]
  };
  settings();
  
  $('.button').click(function(){
    var id = $(this).text();
    if(id == 'Generate'){
      settings();
    }else if(id == 'Save PNG'){
      var node = document.querySelector('.icon');
      domtoimage.toPng(node).then(function (dataUrl) {
        download(dataUrl, 'confetti');
      }).catch(function (error) {
        console.error('oops, something went wrong!', error);
      });
    }else if(id == 'Settings'){
      $('.settings').toggle();
    }
  });
  
  $('.close').click(function(){
    $('.settings').toggle();
  });
  
  $('input').on('change input', settings);
  
  function settings() {
    confetti.rows = $('input[name="rows"]').val();
    confetti.columns = $('input[name="columns"]').val();
    confetti.randomOpacity = $('input[name="opacity"]').prop('checked'); // 70% - 100%
    confetti.randomSize = $('input[name="size"]').prop('checked');
    confetti.randomRotation = $('input[name="rotation"]').prop('checked');
    generateConfetti();
  }

  function generateConfetti() {
    $('.confetti').html('<style>.confetti-cell{width:' + (100 / confetti.columns) + '%;height:' + (100 / confetti.rows) + '%;}</style>');
    for(var i = 0;i < confetti.rows; i++) {
      var top = (100 / confetti.rows) * i;
      for(var q = 0;q < confetti.columns; q++) {
        var icon = Math.floor(Math.random() * confetti.iconURLs.length) + 1;
        var y = random100();
        var x = random100();
        var left = (100 / confetti.columns) * q;
        $('.confetti').append('<div class="confetti-cell" style="top:' + top + '%;left:' + left +'%;animation-delay:' + (q * 100) + 'ms;"><i class="icon i'+ icon +'" style="top:'+y+'%;left:'+x+'%;opacity:' + opacity() + ';transform:rotate(' + rotate() + 'deg) scale(' + size() + ');"></i></div>');
      }
    }
  }

  function opacity() {
    var state = 1;
    if(confetti.randomOpacity) {
      state = Math.random() + 0.5;
    }
    return state;
  }
  
  function rotate() {
    var state = 0;
    if(confetti.randomRotation) {
      state = Math.floor(Math.random() * 70);
    }
    return state;
  }
  
  function size() {
    var state = 1;
    if(confetti.randomSize) {
      state = 1 + (Math.random() - 0.6);
    }
    return state;
  }
  
  function random100() {
    return Math.floor(Math.random() * 100);
  }
  
  function openInNewTab(url) {
    var win = window.open(url, '_blank');
    win.focus();
  }
  
})();

This Pen is owned by Louis Dickinson on CodePen.

See more by @LoueeD on CodePen

External CSS

External JavaScript