< BACK TO POST
LinkedIn Facebook Twitter

Blog

Simple Css3 Snow Falling Animation

December 19th, 2010 | Css3 , Experiments , Javascript

I like the Fall Leaves Animation in Webkit.org Blog. I inspired from that post and wanted to create something using css3 and javascript w/o a 3rd party library. Here is the result (Works in Safari and Chrome for now) :

Source Code

<!doctype html>
<html>
	<head>
		<title>Simple Css3 Snow Falling Animation</title>
		<link rel="stylesheet" href="css/snow.css" />
	</head>
	<body>
		<div id="snowContainer"></div>
		<script src="js/snow.js"></script>
	</body>
</html>
body{
	background: #fff;
	margin: 0;
}

/*Our container*/
#snowContainer{
	width: 100%;
	height: 200px;
	position: relative;
	overflow: hidden;

}

/*Global styles for snowflakes.*/
#snowContainer>div{
	width: 32px;
	height: 32px;
	top: -32px;
	background: url(../images/snow.png) no-repeat center !important;
	position: absolute;
}

/* STYLES FOR WEBKIT BROWSERS (Safari, Chrome)*/
	/*3 animations applied*/
	#snowContainer>div{
		-webkit-animation-name: snow ,swing, fadeOut;
		-webkit-animation-iteration-count: infinite;
	}

	/*Move flakes 600px in y-position and rotate 180 degrees while moving*/
	@-webkit-keyframes snow {
		0% { -webkit-transform: translate(0px, -32px); }
		100% { -webkit-transform: translate(0px, 200px) rotate(180deg); }
	}

	/*Move left and right*/
	@-webkit-keyframes swing {
		0%{ margin-left: 0; }
		33%{ margin-left: -50px; }
		66%{ margin-left: 50px; }
		100%{ margin-left: 0px; }
	}

	/*Fade out the flakes when they are close to the bottom*/
	@-webkit-keyframes fadeOut {
		0% { opacity: 1; }
		80% { opacity: 1; }
	    100% { opacity: 0; }
	}

/* STYLES FOR OTHER BROWSERS (Might be implemented to Firefox 4)*/
/*Will be needed when Css3 Animations support is available ( http://dev.w3.org/csswg/css3-animations/ )*/
	#snowContainer>div{
		animation-name: snow, swing, fadeOut;
		animation-iteration-count: infinite;
	}

	@keyframes snow {
	    0% { transform: translate(0px, -32px); }
	    100% { transform: translate(0px, 200px) rotate(180deg); }
	}

	@keyframes swing {
	    0%{ margin-left: 0; }
	    33%{ margin-left: -50px; }
	    66%{ margin-left: 50px; }
	    100%{ margin-left: 0px; }
	}

	@keyframes fadeOut {
		0% { opacity: 1; }
		80% { opacity: 1; }
		100% { opacity: 0; }
	}

/* Namespace */
var snow = {
	snowCount : 200, // Number of snowflakes will be created
	container: "snowContainer", // Container Id
	init : function(){
		/* Detect if the browser is a Webkit browser */
		if(navigator.userAgent.indexOf("AppleWebKit")<0){
			alert("Only Webkit browsers will show the animation!");
		};

		/* Create container and add children snowflakes */
		var container = document.getElementById(this.container);
		for (var i = 0; i < this.snowCount; i++){
		    container.appendChild(this.createSnow());
		}
	},
	/* Create snowflakes with random x-position, random size and random timing effects */
	createSnow : function (){
		var div = document.createElement("div");
		var getRandom = this.getRandom;
		div.style.left = Math.floor(getRandom(1,100))+"%";
		div.style.webkitAnimationDuration = getRandom(8,18)+"s";
		div.style.webkitAnimationDelay = getRandom(0,10)+"s";
		div.style.backgroundSize = getRandom(80,120)+"%";
		return div;
	},
	/* Generate random numbers with 'max' and 'min' values  */
	getRandom : function (min, max){
	  return (Math.random() * (max - min + 1) + min);
	}

}

snow.init(); //Start snowing

Leave a Reply