skriv ut »Snö som faller... [2]
Trevlig vinterstämning inför julen.. eller bara en insnöad websida? Här används Lager med tecknet *asterisk som snöflinga men du kan ju byta till andra tecken om du vill.
Se även samma script med text som faller här »
Se även annat script med snöflingor här »
Steg 1:
Lägg koden inom <HEAD>:
<HEAD>
<script language="JavaScript">
<!--
Width =800 // ange bredden på sidan som ska
snöas in...
Height =600 // ange höjden på sidan som
ska snöas in...
Count = 50; // antal snöflingor OBS! ange inte
för stort antal!
MaxStep=3 // max steg i rörelsen
MinStep=1 // min steg i rörelsen
MaxFlake=20 // max storlek på snöflinga
MinFlake=5 // min storlek på snöflinga
PosX = new Array();
PosY = new Array();
StepX = new Array();
StepY = new Array();
StarSize=new Array()
for (i = 0; i < Count; i++) {
PosX[i] = Math.random()*Width;
PosY[i] = Math.random()*Height;
StepX[i] =MinStep+Math.random()* -MaxStep;
StepY[i] =MinStep+Math.random()*MaxStep;
StarSize[i]=MinFlake+Math.random()*MaxFlake
//färg på snöflingor och tecken
som används (asterisk * i exemplet)
document.write("<div id='Obj" + i + "' style='position:absolute;
left:0; top:0; visibility:hidden; color:#E5E5E5;
font-size:"+StarSize[i]+"'>*</div>");
}
function animate() {
for (i = 0; i < Count; i++) {
PosY[i] += StepY[i];
PosX[i] += StepX[i];
document.getElementById("Obj"+i).style.visibility
="visible"
if (PosY[i] > document.body.clientHeight-20||PosX[i] > document.body.clientWidth-20||PosX[i]<0)
{ // starta om från toppen av sidan när botten nås
PosX[i] = Math.random()*document.body.clientWidth///2
PosY[i] = document.body.scrollTop;
StepX[i] = MinStep+Math.random()* -MaxStep;
StepY[i] = MinStep+Math.random()*MaxStep;
}
document.getElementById("Obj"+i).style.top
= PosY[i];
document.getElementById("Obj"+i).style.left = PosX[i]
}
setTimeout("animate()", 50);// hastighet
}
setTimeout("animate()", 1000)
// -->
</script>
</HEAD>
Du kan ändra värden i fetstil. Prova dig fram!
