Configure Snow

Snow Amount

Whirl

Falling Speed

Snow Amount

Whirl

Falling Speed

Website Snow Animation with rich effects - quick and simple

Our JavaScript Snow Animation creates a realistic snow effect with many configuration options. Whether you want a whirling blizzard or calm, meditative falling snow, we offer snow flakes of every variety for your homepage.

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 for only € 29.90

Is the Snow Animation suitable for you?

Our Snow Animation is suitable for all websites, shops and blogs. The Snow-Effect 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 Snow Animation you can catapult your user into a winter paradise.

Unique and Individual Snow Animation - customize your own individual Snow Effect

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.

Toller Effekt zu Weihnachten

Configuration Options

Snow Amount:

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

Whirl:

Here you can adjust the strength of the whirling motion of the 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.

Falling Speed:

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

Background Fog:

Turn on the fog effect in the background for an even more realistic display.

Thunderstorm:

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

Fullscreen:

Display the Snow Animation 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, Snow Effect, generate the snow animation?

The Snow Effect 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 snow fall. In combination with a variable and dynamic acceleration of the snow flakes, randomly generated values produce the result displayed on this website.

Buy now for only € 29.90

How can do you integrate the Snow Animation into your website?

The integration of your individual Snow Animation for your website is quick and simple. Simply follow our instructions to integrate the Snow Effect JavaScript and you will have a snow effect on your screen in no time.

Overview:

1 Unpack the Zip file

2 Upload the contents of the file to your server

3 Test the Snow Effect generator

4 Integrate Snow Effect into your website

5 You may configure the Snow Effect using the configurator

1 Unpacking the Zip File

You have just downloaded the Snow Effect 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 Effect 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 Effect

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

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

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

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

Please Note: After successfully testing the Snow Effect, 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 Snow Effect Into Your Website.

There are two options for integrating the 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 Snow Effect 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/ador_snow_p.js"></script>
</body>
1. 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 Snow 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/ador_snow_p.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 Snow 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 Snow Effect to appear. In our example we will use the Div-Element with the ID "mySnowDiv".

Beispiel:

 <body>
<h1>Ich bin eine Überschrift</h1>.
<div id="meinSchneeDiv">
<p>Und ich bin ein toller Text...</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/ador_snow_p.js"></script>
<script>goAdorSnow('meinSchneeDiv', -100000, './wolken1.png', true, true, false, 0.5, 0.5, 0.4);</script>
</body>

The 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 Effect 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 Snow Configurator

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

After configuring the Snow Effect, 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 Effect 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 Snow Effect now for a very special snow experience on your website.

Buy now for only € 29.90

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 snow effect 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 Snow Effect 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