Alice Lindström

Snö på bloggen

12 December 2013 at 19:12 in: Design & Redigerings tips

Här kommer ett super enkelt design tips.

Kopiera koden i rutan här under och klista in den ovanför <head> i alla kodmallar du vill ha snö i.

<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>

Sen är det bara att ändra värderna i koden. Vad det är du ändrar står bredvid, tex hur mycket det ska snö, hur stora, hur fort osv. Testa runt tills du är nöjd.

Men om du vill ha en annan färg på din snö, eller att det ska falla ner något annat ändrar du det i där här stycket som du hittar ungefär i mitten av koden:

document.write("<div id='Obj" + i + "' style='position:absolute; left:0px; top:-20px; z-index:10000; visibility:hidden; color:#fff; font-weight:normal; font-family:Verdana; (klicka f5 om du inte hittar det och skriva in en bit av koden)

För att ändra färg:

Ändra color:#fff; till önskad färg, ex color:#f00000; för röd färg

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 ♣Ω ♥ ♦ ☆ ♫ * ¤ •∞◊↓

0Gilla

Linnea

Svar: Ja det är det! Hur är det själv då?
Hoppas att du haft en fin vecka hittills och får en fin luciadag och fredag imorgon!
Kram!

torsdag 12 December 2013 at 21.17
blogg: http://erne.blogg.se

Kaffehörnan

Nja inte snö för min del

torsdag 12 December 2013 at 22.18
blogg: http://www.kaffehornan.se

Alicelindstrom

Snö på bloggen

Min BLOPPIS

Beställ bloggdesign

Läsvärda inlägg

Personligt

Kreativt

Resor

Övrigt