iWeb Tip #26 – Snow in iWeb

After adding snow to my site here on iWebUnlimited.com back in December I got a lot of people on the forum, facebook, and twitter requesting to post a tutorial on how to add snow to their iWeb sites.  So I’ve found a really easy way to add this to your own site.  I’ve created two ways that you can do this.  You can either just add it into an HTML snippet and it will only snow in the snippet (which you can size to whatever size you want), or if you want it to snow everywhere (like I had on the site) you have to publish your site, then open your html page in an html editor and add just one line of code.  It’s super simple, so let me walk your through how to do it.

With both examples (post in HTML Snippet and in HTML Code after publishing) you have to download the snowstorm.js file below and place it somewhere on your server (whether it be mobileme or your server account with someone like GoDaddy, iPower, BlueHost, etc.).  So for both of these you can do so by clicking the download button below:

Download Snowstorm.js file »

Snow on the entire site:

This one is quite simple, but it does require you to add a single line of code to the html after you publish it, but here are the steps to accomplish it.

1) Download the snowstorm.js file above and put in on your server.  Whether that be on your mobileme server or your hosted server with GoDaddy, iPower, etc.  If you’re hosting with MobileMe then I’d recommend creating a folder called “snow” in this location iDisk/Web/Sites/snow (this is the folder you’ll create).  If you are hosting this on your own server like GoDaddy or something similar I’d make this folder on the root level of the server (by root level I mean to immediate one to the live files.  It’s sometime listed as public_html, sometime’s it just the first level that comes up, etc.).

2) Then drop the snowstorm.js file in that “snow” folder we created in step 1.  If your using MobileMe your link to this file will become https://web.username.com/snow/snowstorm.js (of course replace “username” with your own mobileme account name).    If your using your own host (like GoDaddy, iPower, etc) then your link then become https://yoursite.com/snow/snowstorm.js

3) Create your iWeb site, make it look nice ;-) and publish your site to a folder.

4) Open up the html page that you want the snow to appear on in an HTML editor.  (I recommend using Coda from Panic Software, but as I’ve mentioned before you can just use TextEdit if you’d like, but be sure before opening it in TextEdit that you go into the TextEdit prefs and check the check box in the Open and Save tab that says “Ignore Rich Text Commands in HTML files”.  Then you can open it in TextEdit.

5) Add this line of code right before the closing </head> tag.

<script src=”https://yoursite.com/snow/snowstorm.js“></script>

Of course replace the URL to link to where you put the .js file on your server.

6) Save and test.  If you open your html file now in Safari (or any other browser) you will see that your site is now snowing. Yay!  Upload it to your server and let your viewers enjoy the lovely snow on your website.

View Demo »

Snow in HTML Snippet

This use of the code makes it so you don’t have to go into the html after publishing the site and add any code, you just add this code to an html snippet, hit apply, and it will snow in the html snippet.  The nice thing is, is that you can size the snippet to be whatever size you want, so can it be handy if you  (for example) only want it to snow over the top of a photo or something similar.  But keep in mind that wherever you put the snippet any links or button that are under it will not be “clickable”.  So only put it over the top of items that you don’t really need to be “clickable” underneath the snow.  This method does not put snow across the entire page, only in the html snippet.  If you want it to snow across the entire page, then use the tutorial above.

So here’s how to get it in an HTML Snippet:

1) Download the snowstorm.js file above and put in on your server.  Whether that be on your mobileme server or your hosted server with GoDaddy, iPower, etc.  If you’re hosting with MobileMe then I’d recommend creating a folder called “snow” in this location iDisk/Web/Sites/snow (this is the folder you’ll create).  If you are hosting this on your own server like GoDaddy or something similar I’d make this folder on the root level of the server (by root level I mean to immediate one to the live files.  It’s sometime listed as public_html, sometime’s it just the first level that comes up, etc.).

2) Then drop the snowstorm.js file in that “snow” folder we created in step 1.  If your using MobileMe your link to this file will become https://web.username.com/snow/snowstorm.js (of course replace “username” with your own mobileme account name).    If your using your own host (like GoDaddy, iPower, etc) then your link then become https://yoursite.com/snow/snowstorm.js

3) Add this line of code inside of an HTML Snippet.

<script src=”https://yoursite.com/snow/snowstorm.js“></script>

Of course replace the URL to link to where you put the .js file on your server.

6) Click apply on the snippet and you’ll find that it will now be snowing in your html snippet.  Feel free to resize the snippet to whatever size you need and the script will automatically size the snow to your snippet. Yay!  publish your site and let your viewers enjoy the lovely snow on your website.

View HTML Snippet Demo »

Notes:

You’ll find in the .zip file you downloaded there was two .js files.  If you find that the original snowstorm.js file is loading slow on your site, then try using the snowstorm-min.js file instead.

Customization:

Once you have Snowstorm running in your page, you can customize its properties either by editing the snowstorm.js file directly, or assigning new values to the snowStorm object after snowstorm.js has loaded.

For example:

<!-- required snowstorm JS, default behaviour -->
<script src="https://yoursite.com/snow/snowstorm.js"></script>

<!-- now, we'll customize the snowStorm object -->
<script>
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96;  // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

Thanks everyone.  Hope you like this tip and have fun with it.

If you found this tutorial helpful, please consider donating as it takes a lot of time to put together these tips. Thanks much for visiting iWebUnlimited.com.

[iWeb-Code=’donation’]