JavaScript animation: it's snowing messages

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

JavaScript animation: it's snowing messages
Translate your messages into snowflakes! Download this charming and funny snow-script animation and say anything by snowing. Add as many messages, font-sizes and colors as you like. Internet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x, Opera 7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x/9x.

Configuration:

Step 1: Open your webpage that will display snowmaker. Insert the following code right above the </body>-tag:

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=30

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD","#eeeeFF")

// 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","Courier")

// Set the messages
var snowmessage=new Array ("Hi Rita", "Hi Kim", "Hi Mom", "Hi you", "Hi Tina", "Hi Mary")

// 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=18

// Set the minimal-size of your snowflaxes
var snowminsize=6

// 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 i_text=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
}

for (i=0;i<=snowmax;i++) {
	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px'>"+snowmessage[i_text]+"</span>")
	i_text++;
	if (i_text>=snowmessage.length) {
		i_text=0;
	}
}
if (browserok) {
	window.onload=initsnow
}
</script>

Step 2: Go to the top of the script and configure the messages, fonts, font-colors, font-size, number of snowflakes, snowing-zone and speed.