Now it is time for Christmas and if you want to add some snows to a picture like the below example, a cool jQuery plugin — created by Jason Brown — can come to help.

• View Live Demo
• Download Plugin

Just include the plugin along with the latest version of jQuery (1.3.2 currently) and initiate it as the following code

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
	$('#snow_window').snowfall({
		flakeCount : 50,
		flakeColor : '#ffffff',
		flakeIndex: 999999,
		minSize : 1,
		maxSize : 4,
		minSpeed : 2,
		maxSpeed : 5
	});
</script>

where “snow_window” is the ID of target DIV in which snowflakes will fly. You can define number of snowflakes, their color, min/max sizes (just do not set too big sizes or they would look unnatural) and falling speed as parameters (flakeCount, flakeColor etc) in the initializing code.

Of course, you can set the snowfall effect to the whole web page with

$(document).snowfall();

Tip: It won’t work properly with fixed positioning and you must explicitly set the target DIV with “position: relative” or you’ll see snow falling on top corner of the page instead.

I hope you enjoy this Christmas and can surprise your friends with the snowfall effect.