JavaSript tutorial add snow flakes to your site

January 16 2012

This is a simple tutorial that will help you to add snow flakes to your site just like these on this page. This period of the year we’re celebrating Christmas and The New Year. Australia is celebrating the New Year on beach with ice cocktails but not all of the visitors of our Blog are from Australia. We’re glad that our blog have visitors from all around the world, and this post is dedicated to the visitors from the North Hemisphere where there is snow in this period of the year.

It’s not an obligation to add snow flakes, you can replace the pictures of snowflakes with your logo or your hottest product for example and than add a link that will lead to the page of your top product.

JavaScript

The script is very easy for implementation because you have to include the script and place the snow-falke images in the appropriate folder on your server (in our example “/images”).

Click to » Download the JavaScript file «

If you open and view snow.js you can see that every functionality is placed there, so if you want to modify the script you should make the changes in this file.

The file is starting with these lines of code:

var X = 20;	   /// set the number of different snowflakes to be shown, ///
                   ///write 1  if you want only one type of snowflake ///
var SNOW_no = 20;  /// set the number of snowflakes to be shown at once ///

These lines of code enables to show showflakes with random size:

SNOW_RANDOM1 = Math.floor(Math.random()*100);
	SNOW_RANDOM = Math.floor(Math.random()*SNOW_RANDOM1);
	if (SNOW_RANDOM1 >= 50)
	{
		SNOW_RANDOM2= 70 + SNOW_RANDOM+"%";
	}
	else if(SNOW_RANDOM1 < 50)
	{
		SNOW_RANDOM2= 100 - SNOW_RANDOM+"%";
	}

where the minimum is 50% and the maximum is 170% of the image.

This line of the JavaScript file makes randomisation of the snow flakes:

SNOW_Picture = "http://www.yourdomain.com/scripts/images/snow-flakes-"+Math.floor(Math.random()*X+1)+".gif";

If you want to add more snow flakes you should increase the number of the var X = 20; and name the image according to this pattern snow-flakes-number_of_the_image.gif and don’t forget to upload it in the /images folder on you server.

I hope that you’ll like and enjoy the script.

Click » JavaSript tutorial add snow flakes to your site « to DOWNLOAD the EXAMPLE

Search for: