JULKALENDER 2011 - LUCKA 2
Nu är det dags för lucka nummer 2 och i denna lucka tänkte vi dela med oss av hur man får fallande snö på bloggen. Det är enkelt som en smäck och vi hoppas att det funkar för er!
1. Gå in till kodmallen
2. Leta upp koden <head>
3. Och klistra in följande kod under <head> (Var noggranna med att ni får med hela koden)
-imorgon börjar videojulkalendern, för vår del, kika in då för att få reda på vad vi menar-
<script type="text/javascript">
Width =1200; // ange bredden på sidan som ska snöas in
Height =7000; // ange höjden på sidan som ska snöas in
Count =50; // antal snöflingor
MaxStep=3; // max steg i rörelsen
MinStep=1; // min steg i rörelsen
MaxFlake=10; // max storlek på snöflinga
MinFlake=4; // 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;
document.write("<div id='Obj" + i + "' style='position:absolute; left:0px; top:-20px; z-index:10000; visibility:hidden; color:#f0feff; font-weight:normal; font-family:Verdana; font-size:"+StarSize[i]+"pt'>•</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] > Width || PosX[i] > Height || PosX[i]<0) { // starta om från toppen av sidan när mitten nås
PosX[i] = Math.random()*Width; ///2
PosY[i] = -20;
StepX[i] = MinStep+Math.random()* -MaxStep;
StepY[i] = MinStep+Math.random()* MaxStep;
}
document.getElementById("Obj"+i).style.top = PosY[i] + "px";
document.getElementById("Obj"+i).style.left = PosX[i] + "px";
}
setTimeout("animate()", 50);// hastighet
}
setTimeout("animate()", 1000);
</script>
Beatrice Jakobsson (foto)
vad roligt! :)
Trackback
