Balbooa Joomla Gallery 2.2.5 Released

Read More

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 beautifully 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 below will work anywhere without any problems.

Demo - The Falling Snow Effect!

Custom CSS

Open Gridbox CSS Editor.

Gridbox CSS Editor

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

Open Gridbox JavaScript Editor.

Javascript CSS Editor

Copy JS code below and paste into the 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. For this we'll use Gridbox Plugin Custom HTML. Into the plugin we need to place the next code:


Demo - Falling Snow Effect with Gridbox or your Joomla website

Download Demo Page