Balbooa Joomla Gallery 2.2.5 Released

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 website with Joomla Page Builder 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.

Demo - The Falling Confetti Animation!

Custom CSS

Open Gridbox CSS Editor.

Gridbox CSS Editor

Copy CSS code below and paste into the 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

Open Gridbox JavaScript Editor.

Javascript CSS Editor

Copy JS code below and paste into the 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.


Demo - The Falling Confetti Animation with Joomla website Builder Gridbox

Download Demo Page