iWeb Tip #26 – Snow in iWeb

15
7600
Snow in iWeb

Snow in iWebAfter 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’]

15 comments

  1. Bryan 16 February, 2011 at 10:59 Reply

    I cannot get the html snippet to work. I use mobile me, and placed the .js file where you indicated. is the url path ”http://web.username.com/snow/snowstorm.js“ correct for mobile me? when i replace username with my username, nothing seems to work.

    Please tell me what I am doing wrong.

    • iWebUnlimited 5 March, 2011 at 20:15 Reply

      Bryan, make sure you put it in this location on your iDisk iDisk/Web/Sites/Create folder here called “snow”, then put the snowstorm.js file in that folder. If you are still having problems please post a link to your page.

  2. Joe 7 July, 2011 at 12:01 Reply

    I am normally successful with all of your valuable hints and tips.

    Not so with ‘snow’.

    When I publish to file I end up with an index.html file and another in the pages file folder along with the page’s .html file.

    Which is the correct file to post the html code you provide?

    Where exactly am I to insert the code?

    A video tutorial would leave very little room for error.

    Thanks,

    Joe

  3. Bigguy 1 October, 2011 at 19:48 Reply

    It wasn’t working for me either until I realized I need to change the quotation marks after I pasted the snippet into my html file.

    (ORIGINAL)

    — vs. —

    (REVISED QUOTES)

  4. Bigguy 1 October, 2011 at 19:49 Reply

    It wasn’t working for me either until I realized I need to change the quotation marks after I pasted the snippet into my html file.

    ”http://yoursite.com/snow/snowstorm.js“ (ORIGINAL)

    — vs. —

    “http://yoursite.com/snow/snowstorm.js” (REVISED QUOTES)

  5. Bigguy 1 October, 2011 at 19:53 Reply

    Sorry for the multiple posts. Pasting in this text box isn’t helping my point. To put it simply, when you past the snippet, make sure you use inch marks not quote marks.

  6. Jonathan 20 December, 2012 at 02:36 Reply

    I`m trying to teach what I´ve learn so far to others, I just lunch and spanish Lenguaje website where I’m planning to help my spanish people, I’m not a professional in web design how ever I´ve learn a ton from website like yours and I do appreciate the time and effort you put into all of your tutorials, I understand the work that is behind so we all people should appreciate that.

    With that been said I encounter a problem when posting a tutorial

    QUESTIONS IS how can I add HTML code, so people can copy it like the one you have up here for the customization, when I tried to add it to my page the code just disappear I hope my question is clear and I hope you help me on that one so I can help more people out there

    AGAIN THANKS

Leave a Reply to Becky Cancel reply

Facebook
Twitter
YouTube