Amit Bhawani Blog

Stay Updated!

Powered by Genesis

You are here: Home / Blogging / Falling Snow Effect for Christmas Javascript Codes

Falling Snow Effect for Christmas Javascript Codes

December 2, 2009 by Amit Bhawani

Christmas is nearby and you would be looking to test out a new christmas wordpress theme or else some different effects which would be a new blog header, background or falling snow which falls from the top of the screen towards the status bar. Last year we had written about a Christmas Snowfall Plugin which seems to be not available now, which is the reason iam going to refer you to a new effect code which can be easily implemented.

This Javascript based snowmaker is quite good because it loads the font types which look like snowflake images and does not actually require you to host any images and load them which can be bandwidth consuming too. Just add the following code anywhere after the <body> Tag on your theme files or near the footer of your blog.

<script>
// CREDITS: // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com // Permission given to use the script
on webpages provided that this notice remains as is. // Set the number of snowflakes
(more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow.
Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
// Set the fonts, that create the snowflakes. Add as many fonts as you like var
snowtype=new Array("Arial Black","Arial Narrow","Times","Comic
Sans MS") // Set the letter that creates your snowflake (recommended:*) var
snowletter="*" // Set the speed of sinking (recommended values range
from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var
snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 //
Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=3 ///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE ///////////////////////////////////////////////////////////////////////////
// Do not edit below this line var snow=new Array() var marginbottom var marginright
var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new
Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random())
return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.clientHeight
marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight
marginright = window.innerWidth } var snowsizerange=snowmaxsize-snowminsize for
(i=0;i<=snowmax;i ) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i]
= 0.03 Math.random()/10; snow[i]=document.getElementById("s" i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange) snowminsize snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2)
{snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size) marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size) marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy } movesnow() } function movesnow() { for (i=0;i<=snowmax;i )
{ crds[i] = x_mv[i]; snow[i].posy =snow[i].sink snow[i].style.left=snow[i].posx lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy if (snow[i].posy>=marginbottom-2*snow[i].size
|| parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1)
{snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size) marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size) marginright/2}
snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i )
{ document.write("<span id='s" i "' style='position:absolute;top:-" snowmaxsize "'>" snowletter "</span>")
} if (browserok) { window.onload=initsnow } </script>

Thats it you will start seeing some excellent snow flakes falling on your screen when you visit your blog url, also works on most latest web browsers.

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook

Related

About

My name is Amit Bhawani and here I like to share my internet/tech experience with my online readers. You can follow me on Twitter, Facebook & Instagram at @AmitBhawani I am also the Editor-in-Chief of PhoneRadar & Master Gadgets

About Amit Bhawani

My name is Amit Bhawani and here I like to share my internet/tech experience with my online readers. You can follow me on Twitter, Facebook & Instagram at @AmitBhawani

Comments

  1. mathan says

    December 2, 2009 at 5:31 pm

    oh!! Thanks for giving the js i am going to check now..

  2. A A says

    December 12, 2011 at 12:44 pm

    not working.

Timeline

Check out Just EV Tweets by @amitbhawani

Recommended To Read

  • How to Find your WiFi Signal Strength & Dead spots in your Home – Best Apps
  • The Wuhan Corona Virus Effect in India – How to Stay Safe
  • This Blogger Lost 25Kgs with this Secret Strategy that Includes a Fitness Tracker
  • Making Money on YouTube, MCN, Useful Tools, Tips & Success Stories
  • The #JaguarPerformance Experience that was Mind Blowing