The Future of Joomla Website Builder Gridbox. What to Expect? Read More

The Falling Confetti Animation. FreeBox Theme Included!

The Falling Confetti Animation with Joomla website Builder Gridbox

New Year is coming! Time to decorate your Joomla! website. Today we have a new tutorial for you! We gonna show you how to add beautiful confetti animation to your Joomla website with Gridbox using CSS and Javascript. Also, Freebox Theme from the Demo included!

Technically, confetti animation is very similar to the Falling Snow Effect. We want to notice, that animated Confetti can be added to any Joomla website, code bellow will work anywhere without any problems.

Try on Demo!

Custom CSS

Open Gridbox CSS editor by the clicking on the button "Open Editor". Copy CSS code below and paste into Gridbox CSS editor

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

JavaScript

Click on the icon Theme Configuration >> Body >> Custom Code and open JavaScript editor by the clicking on the button "Open Editor".

Copy JS code below and paste into Gridbox JavaScript editor.


jQuery(document).on('ready', function() {
    var flakes = '',
        randomColor;
    for(var i = 0, len = 400; i < len; i++) {
        randomColor = Math.floor(Math.random()*16777215).toString(16);
        flakes += '
'; } document.getElementById('confetti').innerHTML = flakes; });

HTML

Finally, we need to add html code. For this we'll use Gridbox Plugin Custom HTML. Into the plugin we need to place the next code:

Html code you can place anywhere. But we recommend HTML place in a separate row, and enable "Hide on Mobile" for row, to not display The Falling Confetti Animation on mobile devices.


Demo - The Falling Confetti Animation with Joomla website Builder Gridbox Download Demo FreeBox Theme

How to import downloaded .xml theme file you can find here: Import & Export