December 23, 2011

Add Snow Falling Effect to Your Website




There are few festive times per year that we really wanna engage with. But it may depend on your culture. However if I remind you about December month, you will start to imagine Santa and gifts all around you with a snowy background. That's how our imagination works. You don't wanna be a catholic to find the year end as a festive season. All people get together in this season and celebrate it with their friends and family members. So most of you may decorate and do some colorful changes to your home place. What about your blog or website? Why don't you think about adding some new look or effect to your website in the festive season or when the Winter season knocks your door?

I was thinking what if I can add some festive look to my blog in the X'mas season. And I did see most of webmasters working on that and made their sites more colorful with cool images and effects. I did some research on the web and found some cool stuff which are more creative enough to the holidays. So now I would like to share one of findings with you which is known as jQuery Snawfall plugin.

This will add snow falling effect on your site and there is a positive aspect of this plugin over the other stuff I found online - Shadow on flakes. If you have light color background on your site, there is no point of showing just white snow flakes. But with enabled shadow on flakes, it will strengthen the visibility of snow falling on your page eventhough your site has lighter background. Absolutely there is more options too. So if you wanna add this effect to your site, let go through below steps.


Steps:

1. Search for the following tag within your template / source code.

</head>

2. Now add below jQuery JavaScript Library just before the </head> tag.

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

Notes:

* If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

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

3. Then, search for the below tag in your template.

</body>

4. Add below code snippet just before the </body> tag.

<script src='https://sites.google.com/site/mayura4ever/snowfall.min.jquery.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 to false 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.

5. Save your template.


More Information:

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 in 4th step.

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


Credits: This jQuery Snowfall plugin is a creation of Jason Brown and the credit goes to him.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Akansh said...

it`s not working mayur please visit my blog {updatevia.blogspot. com}

Mayura De Silva said...

Hi Akanash,

Would you search and see is there any other jQuery JavaScript Libraries implemented in your template? If you got another, just make sure to keep only one :)

Cheers...

TheUnfortunateGirl said...

Hey Mayura, Thanks for the code. It's realy beutiful, i search for years but now thanks to you! love it! :D :))

Mayura De Silva said...

Hi Nadia,

You are welcome dear :) Oh gosh... glad I helped you out at last...

Cheers...

Carolyn Nicander Mohr said...

Hi Mayura, For Wordpress users, there is a plugin called WP Snowfall. It may not be as elegant as your coding, but it gets the job done fairly easily.

Mayura De Silva said...

Hi Carolyn,

Ah WordPress... It's about plugins, no? :)


Thanks for stopping by and letting know about it here dear :)

Cheers...

Margarita Slavkova said...

Mayura, I saw Adrienne's blog with the snow and I googled for the effect. You came first. best SEO work done. Now I am going to have it thanks to your elegant code.

Mayura De Silva said...

Hi Margarita,


Ah I've seen it yesterday dear :) I think she might have using a plugin. Well, I'm not following all the SEO stuff but only basics here dear :)


Hope you could able to make use of it on your blog :)


Thanks for coming by and sharing your thoughts dear :) Appreciate your compliments too Margarita :)


Cheers...