The Falling Snow Effect with Gridbox. FreeBox Theme Included!

Animated Resizing Header with Gridbox

Christmas is coming! Today we gonna show you how to add beautiful animated snowflakes to your Joomla website with Gridbox using CSS and Javascript. Let it Snow!

We want to notice, that animated snowflakes 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

#snow {
    position: fixed;
    top: -160px;
    left: 0;
    right: 0;
}

#snow i { 
    -webkit-animation: falling 20s 1s linear;
    animation: falling 8s linear 2s 20;
    animation-iteration-count :infinite;
    -webkit-animation-iteration-count :infinite;
    border-radius: 50%;
    cursor: default;
    display: inline-block;
    font-style: normal;
    height: 16px;
    user-select: none;  
    -webkit-user-select: none;  
    width: 16px;
    color: white;
}   
    
/* animation */
@-webkit-keyframes falling {
    0% {-webkit-transform: translate3d(0,0,0) rotate(0deg);}
    100% {-webkit-transform: translate3d(30px,1000px,0) rotate(360deg);}    
}

@keyframes falling {
    0% {transform: translate3d(0,0,0) rotate(0deg);}
    100% {transform: translate(30px,1000px) rotate(360deg);}    
}
    
/* Sizes */
#snow i:nth-of-type(4n) {
    height:30px;
    width:30px;
}

#snow i:nth-of-type(4n+1) {
    height:24px;
    width:24px;
}

#snow i:nth-of-type(4n+2){
    height:10px;
    width:10px;
}

/* Speeds */
#snow i:nth-of-type(4n) {
    -webkit-animation-duration: 16.3s;
    -moz-animation-duration: 16.3s; 
}

#snow i:nth-of-type(4n+1){
    -webkit-animation-duration: 16.1s; 
    -moz-animation-duration: 16.1s; 
    }

#snow i:nth-of-type(4n+2) {
    -webkit-animation-duration: 12.7s;
    -moz-animation-duration: 12.7s;
}

/* Delays */
#snow i:nth-of-type(3n) {
    -webkit-animation-delay: 2.3s;
    animation-delay: 2.3s;
}

#snow i:nth-of-type(3n+1) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

#snow i:nth-of-type(3n+2) {
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
}

/* Timing functions */
#snow i:nth-of-type(5n) {
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
}

#snow i:nth-of-type(5n+1) {
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
}

#snow i:nth-of-type(5n+2) {
    -webkit-animation-timing-function:ease;
    animation-timing-function:ease;
}

#snow i:nth-of-type(5n+3) {
    -webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
}

#snow i:nth-of-type(5n+4) {
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
}

#snow i:nth-of-type(11n)  {
    -webkit-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);
    animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);
}

/* Opacity */
#snow i:nth-of-type(7n){
    opacity: 0.5;
}

#snow i:nth-of-type(7n+2) {
    opacity: 0.3;
}

#snow i:nth-of-type(7n+4) {
    opacity: 0.7;
}

#snow i:nth-of-type(7n+6){
    opacity: 0.6;
    -webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
}

#snow i:nth-of-type(7n+1){
    opacity: 0.8;
}

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.


window.onload = function() {
  var flakes = [];
  var types = ['❄','❅','❆'];
  for(var i = 0, len = 240; i < len; i++) {
    flakes.push('' + types[i%3]  + '');
  }  document.getElementById('snow').innerHTML = flakes.join('');
};

HTML

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

As you can see on the video, we have placed html code in the bottom of website. So, if you want to display show only in the header section, you need to add code into the first section.


Demo - Falling Snow Effect with Gridbox or your Joomla website Download Demo FreeBox Theme

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