Falling Confetti Animation

This tutorial explains how to add a beautiful falling confetti animation to your Joomla website with Gridbox using CSS...

Tools

Code editor

Estimated time

5 min.

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;});

Something is not clear? Ask a question on community forums.