Friday, July 20, 2012

Add snow effect to your site or blog

Hi friends, today I am going to tell you how to add falling snow effect to your browser. You might have observed that some snow are falling in this webpage also. I have also applied the same trick. It gives a very attractive and unique to your website. If you apply this to your site then any one might ask you "Hey!! How you have done this??"


Here are the simple steps. Just follow them.


Note: Dont forget to make a backup of your code.


Method 1:

Steps:

1. Find <head> in your template and add below minified jQuery JavaScript Library right after that.

Note: If you have already implemented jQuery JavaScript Library in your site, you don't wanna add this again.



<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>

2. Now add below code snippet right after above line of code.

<script src='https://sites.google.com/site/mayuradocs/Snowfall.js' type='text/javascript'/>

<script type='text/javascript'> 
jQuery(document).ready(function()
{
 jQuery(document).snowfall({
  flakeCount : 100,
  flakeColor : '#ffffff',
  minSize : 1,
  maxSize : 5,
  round : true,
  shadow : true
 });
});
</script>


Color Indication Information

   - Number of Flakes on the Page

   - Color of the Flakes

Here you need to add the hex value of the color you wanna use with flakes

   - Minimum Size of a Flake

   - Maximum Size of a Flake

   - Shape of a Flake

If you wanna show flakes in round shape, set value true here. Else set it tofalse to show flakes in square/pixel shape.

   - Enable/Disable Shadow

Set value as true if you wanna add shadow for flakes (Recommended for light background color websites). Else set it to false.


Note: If you wanna stop the snow falling effect for a while without deleting above code snippet, just add below line right before the </script> tag.

$(document).snowfall('clear');


3. Save your template and view your site.



Method 2:

1. Add a html/javascript widget to your blog and paste the following code in code area.

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">  /*********************************************** * Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript  * Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/  * Please keep this notice intact ***********************************************/  </script>

2. save and see your page.


Enjoy hacking.
Scroll to Top