Jump to content

Recommended Posts

Posted

A decent Javascript for snow flakes on a page! Try it out!

<hr />

<script>
var snowmax=40
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
var snowletter="*"
var sinkspeed=4
var snowmaxsize=32
var snowminsize=22
var snowingzone=3

// Luke Don't 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>

  • 3 years later...
Posted

Beautiful! Thanks for the share, I'm sure this will come handy in one of my projects.
However I noticed that (on Google Chrome at least), the scroll bar flickers about every 0.2 seconds. A little glitch I'm sure we can fix. I'll post a fix if i'm able to find one :-)

  • Administrators
Posted

Beautiful! Thanks for the share, I'm sure this will come handy in one of my projects.

However I noticed that (on Google Chrome at least), the scroll bar flickers about every 0.2 seconds. A little glitch I'm sure we can fix. I'll post a fix if i'm able to find one :-)

Yeah let me know if you do, I'd like to use it.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...