Falling Confetti Animation

Adding HTML

1. Using plugin Custom HTML, add html code <div id="confetti"></div> to the page.

*If you want to display a snow effect on all pages of your site, place the code in your header or footer.

Adding CSS

2. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

#confetti {
 left: 0;
 position: fixed;
 right: 0; 
 top: -160px;
 z-index: 10000;
}
 
#confetti .ball {
 animation-iteration-count :infinite !important;
 -webkit-animation-iteration-count :infinite !important;
 border-radius: 50%;
 cursor: default;
 display: inline-block;
 height: 10px;
 user-select: none; 
 -webkit-user-select: none; 
 width: 10px;
} 
 
@-webkit-keyframes falling-left {
 0% {-webkit-transform: translate3d(0,0,0);opacity: 1;}
 10% { opacity: 0;}
 20% { opacity: 1;}
 30% { opacity: 0;}
 40% { opacity: 1;}
 50% { opacity: 0;}
 60% { opacity: 1;}
 70% { opacity: 0;}
 80% { opacity: 1;}
 90% { opacity: 0;}
 100% {-webkit-transform: translate3d(0,120vh,0); opacity: 1;}
}
 
@keyframes falling-left {
 0% {-webkit-transform: translate3d(0,0,0);opacity: 1;}
 10% { opacity: 0;}
 20% { opacity: 1;}
 30% { opacity: 0;}
 40% { opacity: 1;}
 50% { opacity: 0;}
 60% { opacity: 1;}
 70% { opacity: 0;}
 80% { opacity: 1;}
 90% { opacity: 0;}
 100% {-webkit-transform: translate3d(0,120vh,0); opacity: 1;}
}
 
#confetti .ball:nth-child(2n) {
 -webkit-animation: falling-left linear;
 animation: falling-left linear ;
}
 
@-webkit-keyframes falling-right {
 0% {-webkit-transform: translate3d(0,0,0);opacity: 0;}
 10% { opacity: 1;}
 20% { opacity: 0;}
 30% { opacity: 1;}
 40% { opacity: 0;}
 50% { opacity: 1;}
 60% { opacity: 0;}
 70% { opacity: 1;}
 80% { opacity: 0;}
 90% { opacity: 1;}
 100% {-webkit-transform: translate3d(0,120vh,0); opacity: 0;}
}
 
@keyframes falling-right {
 0% {-webkit-transform: translate3d(0,0,0);opacity: 1;}
 10% { opacity: 0;}
 20% { opacity: 1;}
 30% { opacity: 0;}
 40% { opacity: 1;}
 50% { opacity: 0;}
 60% { opacity: 1;}
 70% { opacity: 0;}
 80% { opacity: 1;}
 90% { opacity: 0;}
 100% {-webkit-transform: translate3d(0,120vh,0); opacity: 0;} 
}
 
#confetti .ball:nth-of-type(2n+1) {
 -webkit-animation: falling-right linear ;
 animation: falling-right linear;
}

Adding JavaScript

3. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

jQuery("document").ready(function($){
 var flakes = '',
 randomColor;
 for(var i = 0, len = 400; i < len; i++) {
 randomColor = Math.floor(Math.random()*16777215).toString(16);
 flakes += '<div class="ball" style="background: #'+randomColor;
 flakes += '; animation-duration: '+(Math.random() * 9 + 2)+'s; animation-delay: ';
 flakes += (Math.random() * 2 + 0)+'s;"></div>';
 }
 document.getElementById('confetti').innerHTML = flakes;
});