Snowflakes animation script

The dropping objects' animation script that is used and defined on this page requires to have at least a version 8.06 of TOWeb.

To integrate this script in a topic of your site you will to copy/paste the code below into an HTML script field that you will name for example SNOW and add its field name like this %SNOW% inside the text of one of your paragraphs :

<script src="https://www.lauyan.com/goodies/snow/snow.js?8" id="_x2"></script>
<script>
function onTOWebPageLoaded(){
  initSnow( 1, ["#b6d6f7","#90bfef","#2196f3"], 45, 0.6, 15, 40 );
}
</script>

<script src="https://www.lauyan.com/goodies/snow/snow.js?8" id="_x2"></script>
<script>
function onTOWebPageLoaded(){
  initSnow( 3, ["#ea8888","#f44336","#aa0000"], 60, 0.6, 15, 40 );
}
</script>

The "initShow" line of the script above contains different parameters that you can customize to your liking according to your needs or tastes.

1st parameter: the style of the flakes

In our snow flake example the value is set to
1 = star style (*) but you can also use:
0 = flake style (*) 
2 = flake & star style
3 = heart style ( ❤ )

2nd parameter: the colors of the flakes

In our example ["#b6d6f7","#90bfef","#2196f3"] is the list of 3 different colors possible for blue flakes (colors randomly picked up for each flake) and 3 different red colors ["#ea8888","#f44336","#aa0000"] for the red hearts.

3rd parameter: the maximum number of flakes 

In our example we have defined 45 flakes. Be careful not to put this value too high: it could overload some screens (especially small ones like smartphones) but also slow down the navigation of your visitors (depending on the power of their computer, tablet or smartphone).

4th parameter: the speed of the snowflakes animation

In our example the decimal value was set to 0.6 which corresponds to an average value
( 0.1 < very slow / 0.5 = normal / 1 = fast enough / other values > 1 = fast )

5th parameter: the minimum size of the flakes

In our example the value has been set to 15. This value must be greater than 6 so that the flakes or stars can be a visible and identifiable.

6th parameter: the maximum size of the flakes 

In our example, the value has been set to 40. The maximum size must be greater than or equal to the minimum size.

Remarks about flake colors 

Our previous example uses 3 colors (shades of blue) but :

• you can defined only one color if you want too. If you do so you will still need to frame your unique color with [" and "]
• there is no limit to the number of colors you can set. If you use at least 2 colors you will have to separate them with commas ","
• if the background of your page is not white (like in our page) but dark, you may want to use a brighter or whiter color for your flakes. By default 2 light colors from white to light gray are defined. If you want to use them you will have to replace the color list [...] by the value: null

To place the snow animation in a single section of your site we saw previously that you had to add the script inside one of the paragraphs of your topic. But if you want the animation to appear in every pages of your site then, from any topics, just edit a text located inside your page footer in order to add your snow script there.