MediaWiki:Snow.js

Note:
After saving, you may have to bypass your browser's cache to see the changes.

• Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
• Konqueror: click Reload or press F5;
• Opera: clear the cache in Tools → Preferences;
• Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.

 
////////////////////////////////////////////////////////////////////////
// SnowFlakes-Script (c) 2009, Dominik Scholz / go4u.de Webdesign
////////////////////////////////////////////////////////////////////////

// amount of snow flakes
	var snow_amount = 50;
// colors of snowflakes
	var snow_color = new Array('#AAAACC', '#DDDDFF', '#CCCCDD', '#F3F3F3', '#F0FFFF');
// fonts to be used for snowflakes
	var snow_type = new Array('Arial Black', 'Arial Narrow', 'Times', 'Comic Sans MS');
// char used for snowflakes
	var snow_char = '*';
// vertical snowflakes speed
	var snow_speed = 2.4;
// timeout for animation
	var snow_timeout = 50;
// maximum size of snowflakes
	var snow_maxsize = 22;
// minimum size of snowflakes
	var snow_minsize = 8;
// maximal drift in each direction (left/right)
	var snow_drift = 15;

////////////////////// don't edit below this line //////////////////////
var snow_flakes = new Array();
var snow_body_width = 0;
var snow_body_height = 0;
var snow_resizing = false;
var snow_range = snow_maxsize - snow_minsize;
var snow_eventHandlerResize = window.onresize;
var snow_eventHandlerLoad = window.onload;

// register window resize event
window.onresize = snow_resize;
window.onload = snow_start;

// start snow
function snow_start()
{
	if (snow_eventHandlerLoad != null) snow_eventHandlerLoad();

	// init window size
	snow_window_size();

	// add new flakes
	while (snow_amount > snow_flakes.length)
		snow_flake_create(snow_flakes.length);

	// start to move snow
	snow_move();
}


////////////////////////////// functions ///////////////////////////////

// creates a new snowflake
function snow_flake_create(i)
{
	// select body tag
	var insertBody = document.getElementsByTagName('body')[0];

	// create span child for flake
	var insertFlake = document.createElement('div');
	insertFlake.id             = 'flake'+i;
	insertFlake.style.position = 'absolute';
	insertFlake.style.left     = '0px';
	insertFlake.style.top      = '-'+snow_maxsize+'px';
	insertFlake.style.zIndex   = 20000;
	insertFlake.innerHTML      = snow_char;
	insertBody.appendChild(insertFlake);

	// create array element
	snow_flakes[i]       = new Array();
	snow_flakes[i].x     = snow_random(snow_body_width-2*snow_drift-snow_maxsize-3) + snow_drift+1;
	snow_flakes[i].y     = -snow_maxsize-snow_random(snow_body_height);
	snow_flakes[i].size  = snow_random(snow_range) + snow_minsize;
	snow_flakes[i].count = snow_random(10000);
	insertFlake.style.color = snow_color[snow_random(snow_color.length-1)];
	insertFlake.style.family = snow_type[snow_random(snow_type.length-1)];
	insertFlake.style.fontSize = (snow_random(snow_range)+snow_minsize)+"px";
}

// restarts an existing snow flake
function snow_flake_restart(i)
{
	snow_flakes[i]       = new Array();
	snow_flakes[i].x     = snow_random(snow_body_width-2*snow_drift-snow_maxsize-3) + snow_drift+1;
	snow_flakes[i].y     = -snow_maxsize;
	snow_flakes[i].size  = snow_random(snow_range) + snow_minsize;
	snow_flakes[i].count = 0;
}

// move existing flakes
function snow_move()
{

	for (i=0; i<snow_flakes.length; i++)
	{
		var flake = document.getElementById('flake'+i);

		// restart existing flake
		if ((snow_flakes[i].y + snow_flakes[i].size + 20) >= snow_body_height)
			snow_flake_restart(i);

		snow_flakes[i].count++;
		snow_flakes[i].y += snow_speed;

		x = snow_flakes[i].x + Math.sin(snow_flakes[i].count / snow_flakes[i].size) * 15;
		y = snow_flakes[i].y;

		
		flake.style.left = x + 'px';
		flake.style.top  = y + 'px';
	}

	// do it again
	window.setTimeout('snow_move();', snow_timeout);
}

function snow_random(range)
{
    return Math.floor(Math.random() * range);
}

function snow_window_size()
{
	// save old width
	var old_width = snow_body_width;

	// get new width
    snow_body_width = document.body.clientWidth - snow_maxsize - 20;
    snow_body_height = document.body.clientHeight;
	if ((window.innerHeight) && (window.innerHeight > snow_body_height))
		snow_body_height = window.innerHeight;
	else if ((document.body && document.body.offsetHeight) && (document.body.offsetHeight > snow_body_height))
    	snow_body_height = document.body.offsetHeight;

	// calculate correction ratio
	var ratio = snow_body_width / old_width;
		
	// for all flakes
	for (i=0; i<snow_flakes.length; i++)
	{
		var flake = document.getElementById('flake'+i);

		// do width correction
		snow_flakes[i].x *= ratio;
		
		// restart existing flake
		if ((snow_flakes[i].y + snow_flakes[i].size + 20) >= snow_body_height)
			snow_flake_restart(i);
	}
}

// handle resize event
function snow_resize()
{
	if (snow_eventHandlerResize != null) snow_eventHandlerResize();
	snow_window_size();
}