Animated Snow Falling

This tutorial explains how to add beautifully animated snowflakes to your Joomla website with Gridbox...

Tools

Code editor

Estimated time

5 min.

Adding HTML

1. Using plugin Custom HTML, add html code <div id="snow"></div> to the page.


*If you want to display the falling 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.


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

Adding JavaScript

3. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

 

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

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