Add falling confetti effect to SharePoint page

 

This script is to add falling a confetti effect to your SharePoint on-prem (2016 or 2019) page. Create a script editor webpart, and paste this code into it:

<div class="wrapper"></div>
<style>
body {
  margin: 0;
  overflow: hidden;
}
.wrapper {
  position:fixed;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:100vh;
  z-index:100;
  min-height: 100vh;
}
[class |= "confetti"]{
  position: absolute;
}
.red {
  background-color: #dc2626;
}
.yellow {
  background-color: #ffbf00;
}
.blue {
  background-color: #6eaff3;
}
</style>
<script>
// For loop to create all of your confetti items on load
for (var i = 0; i < 30; i++){
  create(i);
}
function create(i){
  // Create confetti particles
  
  //Generates random number, then multiples by 15
  var width = Math.random() * 15;
  
  //Takes generated width, multiplies by .4 for height
  var height = width * 0.4;
  
  //generates a random number to decide whether the confetti is blue, yellow, or red
  var colorIdx = Math.ceil(Math.random() * 3);
  var color = "red";
  
  // Select random color for particle
  switch(colorIdx){
    case 1:
      color = "yellow";
      break;
    case 2:
      color = "blue";
      break;
   //add more colors here by doing this:
   /*
   case 3:
   color = "colorname";
   break
   */
   // Make sure to style the class of your color name to set the background color
    default:
      color = "red";
  }
  
  // Create DOM object for particle
  // and add particle to wrapper 
  $('<div class="confetti-'+i+' '+color+'"></div>').css({
    "width" : width+"px",
    "height" : height+"px",
    "top" : -Math.random()*20+"%",
    "left" : Math.random()*100+"%",
    "opacity" : Math.random()+0.5,
    "transform" : "rotate("+Math.random()*360+"deg)"
  }).appendTo('.wrapper');  
  
  // Make confetti drop
  drop(i);
}
function drop(x) {
  $('.confetti-'+x).animate({
    top: "100%",
    left: "+="+Math.random()*15+"%"
  }, Math.random()*2000 + 2000, function() {
    reset(x);
  });
}
    
function reset(x) {
  // Reset opacity
  $('.confetti-'+x).css('opacity','1');
  
  $('.confetti-'+x).animate({
    "top" : -Math.random()*20+"%",
    "left" : "-="+Math.random()*15+"%"
  }, 0, function() {
    drop(x);             
  });
}
</script>

Sources: 

https://community.hubspot.com/t5/CMS-Development/Trying-to-create-a-confetti-effect-in-html/td-p/13171 

https://codepen.io/anon/pen/JMOQzE

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.