Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to create a falling snow (snowing) effect on a web page

If you want to add snowing effect to your web page, feel free to use our script. Right-click on the link to this script and save the script file on you hard-disk. Then copy the saved script file in the same web directory as your web page. For example if your web page is called in /index.html copy the script to /snowing-effect.js

Afterwards add the following piece of HTML immediately after the opening BODY tag:

<script type="text/javascript" src="snow-script.js"></script>

In the example below the inserted script tag is marked in red color:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My page</title>
</head>
<body>
<script type="text/javascript" src="snowing-effect.js"></script>
<div style="border: 1px solid black; height: 800px;"></div>
</body>
</html>

You can customize the behavior of the script by settings javascript variables prior to calling the script This is a list of supported script parameters:

  • snow_size_min - The minimum size of created snowflakes in pixels. Default value is 8 pixels
  • snow_size_max - The maximum size of created snowflakes in pixels. Default value is 20 pixels
  • snow_num_flakes - The maximal number of snowflakes that can be displayed on screen at once. Default value is 20 snowflakes
  • snow_horiz_start - The horizontal offset in pixels of the left border of the snowing window. The default value is 0, i.e. screen's left edge.
  • snow_horiz_end - The horizontal offset in pixels of the right border of the snowing window. The default value is equal to the page width i.e. the right edge of the snowing window is aligned with the right edge of the page.
  • snow_vert_start - The vertical offset in pixels of the top border of the snowing window. The default value is 0, i.e. screen's top edge.
  • snow_vert_end - The vertical offset in pixels of the bottom border of the snowing window. The default value is equal to the page height, i.e. the bottom edge of the snowing window is aligned with the bottom edge of the page.
  • snow_flake_image - If you specify this value then it is treated as the URL of the snowflake. Not specifying this value will force the default behavior which is to use the * (asterisk) character as a snowflake image.
  • snow_flake_color - The HTML color value of the snowflakes. This value has meaning only when you are using the default snowflake image (*). The default value is #A0A0A0
  • snow_fall_speed - The speed in pixels per second at which snowflakes are falling down. The default value is 20 pixels per second.

The example below shows how to specify all of the parameters except for snow_flake_image. Just like in the previous example, the script code is colored in red:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My page</title>
</head>
<body>
<script type="text/javascript">
	var
		snow_size_min = 10,
		snow_size_max = 15,
		snow_num_flakes = 15,
		snow_horiz_start = 200,
		snow_horiz_end = 500,
		snow_vert_start = 100,
		snow_vert_end = 300,
		snow_flake_color = '#808080',
		snow_fall_speed = 30;
</script>
<script type="text/javascript" src="snowing-effect.js"></script>
<div style="border: 1px solid black; height: 800px;"></div>
</body>
</html>