Fallande snö i bloggen.

Då många ändrar sin bloggdesign till en vinterdesign så hade jag tänkt, i detta designtips, att visa er hur man får snö att falla på sin blogg. Bloggare som använder sig av denna kod är Alicelindstom.se samt EpicFaiil.se.

Det enda man behöver göra är att lägga in följande kod i alla kodmallar precis ovanför <head> och sedan ändra koderna efter smak och tycke samt för att koden ska anpassas efter ens egen bloggdesign.
 

<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 OBS! ange inte för stort antal!
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>

 

För att ändra vad som faller ner:
ändra det som står mellan >< i den här raden  font-size:"+StarSize[i]+"pt'>•</div> till valfri symbol, ex ♣Ω ♥ ♦ ☆ ♫ * ¤ •∞◊↓
 

Berätta gärna i en kommentar vad ni vill lära er i nästa designtips.


Moa Murderess

Tack för länken :)

Svar: Det var så lite så :)
Carro - Geek n' Gaming

2014-12-19 / 20:30:29
URL: http://epicfaiil.se

Kommentera inlägget här:

Namn:
Kom ihåg mig?

Mail

Hemsida:

Kommentar:

Trackback