Integrating the Snow Effect Plugin

In the following we will explain how you may integrate and adapt the Snow Effect generator to your own website. Please follow the following steps.

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.

  1. Fullscreen, extending across the whole webpage.
  2. 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:

<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>

Note: We have added the  "..." in the code for clarity, this does not need to be added! You may also add webpage content before and after the "...." in the above example.

 

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>Und ich bin ein toller 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('meinSchneeDiv', -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 "meinSchneeDiv".

Example:

<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 "meinSchneeDiv". However, you may name the Div-Element ID differently. Just make sure the new ID-name also replaces the old "meinSchneeDiv" 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: http://snow-effect.com/

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.