Configure Snow

Snow Amount

Whirl

Falling Speed

Website Snow Animation with rich effects - quick and simple

Our JS Snow Effect creates a realistic snowfall effect with many configuration options. Whether you want a whirling blizzard or calm, meditative snow effect, we offer snow flakes of every variety for your website.

Our Snow Animation is great for all websites that requiring a Christmas flair or focusing on winter themes (winter sports, winter vacation, winter fashion, etc).

Buy Now!

Is the Snow Effect suitable for you?

Our Snowflake Overlay is suitable for all websites, shops and blogs. The Snow Overlay is particularly good for adding the seasonal flair in the Christmas season. Whether you are a professional online shop or hobby blogger, with the customizable Snowfall Overlay you can catapult your user into a winter paradise.

Unique and Individual Snow Overlay - customize your own individual Snow Script

There are a large number of configuration options. In addition to the snow amount, you can configure the whirl and falling speed. You can also generate fog and/ or thunderstorm effects. Checkout the snow Configurator

Toller Effekt zu Weihnachten

Snow JS Configuration Options

Snow Overlay Snow Amount:

Control the amount of falling snow. In combination with the falling speed you can also optimize the performance of the snow script for older devices here.

Snow Effect Whirl:

Here you can adjust the strength of the whirling motion of the JS Snow Animation, from snow flakes that fall down in perfectly straight lines to snow flakes that whirl. This effect causes snow flakes to rapidly change direction, emulating wind effects.

Snow Animation Falling Speed:

Configure the speed of the falling snow. This configuration can also be used in combination with the snow amount to optimize performance of the snow script for older devices.

Snowflake Overlay Background Fog:

Turn on the fog effect in the background for an even more realistic display of the js Snowflake Overlay.

Snowfall Effect Thunderstorm:

Turn dynamic lightning effects on or off to toggle a thunderstorm effect.

Snowfall Overlay Fullscreen:

Display the Snow JS across the entire browser window or restrict the Snow Effect to a defined area. To do so, provide the ID of the DIV-Element.

How does the Javascript Snowflake Overlay generate the snow animation?

The Snowflake Overlay JavaScript generates the animation by randomly displaying individual pictures of snow flakes. This type of random generation is also the principle behind the whirl (vorticity) of the snowfall effect. In combination with a variable and dynamic acceleration of the snow flakes, randomly generated values produce the result displayed on this website.

Buy Now!

How can do you integrate the Snowfall Effect into your website?

The integration of your individual Snow JS for your website is quick and simple. Simply follow our instructions to integrate the Snow JS and you will have a Snowflake Overlay on your screen in no time.

Snow Html Code Overview:

1 Unpack the snow html Zip file

2 Upload the contents of the file to your server

3 Test the Snow Effect Javascript

4 Integrate Snow Overlay into your website

5 You may configure the Snow Animation using the configurator

1 Unpacking the Snow JS Zip File

You have just downloaded the Snow Overlay Script as a Zip file. This file is called "ador-design_snow-effect.zip". Now please unpack the file. (The folder should now be on your hard drive)

2 Upload the Contents of the File to Your Own Server

To integrate the Snow Overlay Script into your website, you must first upload it to your own server or webspace. Please connect to your server (per FTP for instance) and navigate into the root-directory of your website. The root-directory is the highest directory level of your website. This is where your Start Page (e.g. index.html) is usually located.

  • Upload the "js" and "images" directories to your website.
  • Upload the "snow_demo_div.html" and "snow_demo_fullscreen.html" files to your website.

3 Test the Snow Overlay

After completing steps 1 and 2, you may use the provided demo files to test whether the snowfall effect has successfully integrated to your website.
To test please enter the following URLs:

  • Fullscreen Demo: www.Your-Domain.com/snow_demo_fullscreen.html
  • DIV-Demo: (Snow will only be displayed within the defined area): www.Your-Domain.com/snow_demo_div.html

If you can properly access both of these demos from your web server, then the integration of the Snow Animation has been successful. The Snowflake Overlay is now ready for use.

You may now proceed to steps 4 to complete the integration process.

Please Note: After successfully testing the Snowflake Overlay, you may delete both Demo files (snow_demo_div.html and snow_demo_fullscreen.html) from your server. Please consider however, that you can no longer access and test the demos after doing so.

4 Integrating Snowfall Overlay Into Your Website.

There are two options for integrating the JS Snow Effect into your website.

  • Fullscreen, extending across the whole webpage.
  • In a defined area (div) on your webpage.

Basic Integration

Whether you choose option 1 or 2, you must complete the following steps:

You must incorporate the two following lines on every page where you wish the Snowflake Overlay to appear. Place insert the following two lines of code within the <body> </body> tag in your webpage. The best option would be to incorporate the code at the very end, directly before the closing </body> Tag:

Example:

 <body>
...
<script type="text/javascript" src="/js/snow-effect.js"></script>
</body>
1. Snow Effect Javascript Fullscreen Integration:

In addition to the Basic Integration, you must complete the following steps for fullscreen integration.
To view an example, please look at the source code (contents) of the file "snow_demo_fullscreen.html".
You must add the following line of code to every page where you want the Snowfall Effect to appear:

<script>goAdorSnow('', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>

Place the above line of code directly after the lines of code from the Basic Integration.

Example:

 <body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Some text...</p>

<script type="text/javascript" src="/js/snow-effect.js"></script>
<script>goAdorSnow('', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
</body>
2. Integration into a Defined Area:

In addition to the Basic Integration you must complete the following steps.
To view an example, please look at the source code (contents) of the file "snow_demo_div.html" .
You must add the following line of code to every page where you want the Snowfall Effect to appear:

<script>goAdorSnow('mySnowDiv', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>

Additionally, you must define the area where you wish the the Snowfall Effect to appear. In our example we will use the Div-Element with the ID "mySnowDiv".

Beispiel:

 <body>
<h1>I am a Title</h1>.
<div id="snowDiv">
<p>Some nice text...</p>
</div>

<script type="text/javascript" src="/js/snow-effect.js"></script>
<script>goAdorSnow('snowDiv', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
</body>

The JS Snow Effect will now appear in the area you have specified.
In the above example we used the name "mySnowDiv". However, you may name the Div-Element ID differently. Just make sure the new ID-name also replaces the old "mySnowDiv" name in the "goAdorSnow..." line of code. To make the Snow Overlay appear in several different Div-Elements (areas) of your web page, you must give each Div-Element a unique ID-name. For each new area, duplicate the "goAdorSnow..." line of code and change the corresponding name.

5 The JS Snow Effect Configurator

Using our Configurator you may configure and customize the Snowfall Effect as you like. The Snowfall Overlay Configurator can be found here: Snow Configurator

After configuring the Snowflake Overlay, you will find the area labelled "Integration" directly beneath the configurator. There you can choose whether you want the Snow to appear in the background or foreground. Now you may copy the resulting Code-Snippet.
Replace the Code-Snippet from your web page with the Code-Snippet from the configurator. You may repeat this process as often as you like to change the Snow Effect whenever you wish.

Get the Snow Animation for your website

Get your personal Snow Animation for your website with individual configuration options. Thanks to our interactive configurator you can simply integrate the Effect without any programming knowledge.

Secure the customizable Snowfall Overlay now for a very special snow experience on your website.

Buy Now!

Satisfied Customers

Lufthansa TravelGate

Die Integration des Tools ist sehr einfach. Der Schneeeffekt wirkt sehr schön und passt sehr gut zu Weihnachten.

Lufthansa TravelGate

Verbatim — Technology you can trust

The Snowfall Overlay is by far the most realistic version we’ve seen and was easy to integrate on the site.The configuration options are vast making it highly customisable.

Verbatim — Technology you can trust

Frequently Asked Questions

1) How long does it take to receive the product after payment?

In general you will be able to download the Snowfall Overlay JavaScript immediately (within a few minutes).

2) Can I customize the Snow Effect?

Yes, you can customize the Effect whenever and as often as you like with the help of the Snow Configurator.

3) What payment options are there?

You can pay with PayPal, credit card, direct debit or instant bank transfer.

Payment Options