www.idatallhed.blogg.se - Angel Wing Heart

Fallande snö på bloggen

Inlägget publicerades den 2010-10-23 kl: 23:35:30
Kategori Blogg & Design -tips, 23 kommentarer
Nu när snön börjat falla i stora delar av sverige så kanske de skulle passa sig med lite fallande snö i bloggen? Så här kommer en förklaring på hur du skaffar det!

Klistra in följande kod precis under <head> i din kodmall. Sedan är de bara att spara och *pang* så har du fallande snö på din blogg :)

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



Vill du ändra färg på snön eller byta ut "snöbollarna" mot något av följande tecken:
♣ ♥ ♦ ☆ ♫ * ¤ •
så söker du upp kodavsnittet i koden som ser ut så här:
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>");

Byt ut det jag gjort med fet och understruken stil mot den färg och de tecken du vill ha. Färgtips kan du hitta HÄR!
Sosso, Bonzo & Hera
Skriven den 2010-10-24 kl: 07:58:41 » http://teamsosso.se
finns inget "tillbaka till startsidan".. länka headern nu =) plz :) Heris hälsar.. :)
ida och elvis
Skriven den 2010-10-24 kl: 11:28:13 » http://idadockan.blogg.se/
Vi lånar koden :D för snö vill vi också ha på bloggisen. Tack för tippset!
Emma
Skriven den 2010-10-28 kl: 18:08:40 » http://emmaahhh.blogg.se/
Jag fattar inte riktigt hur man ska sätta in det på bloggen ;)
EMELIEJR
Skriven den 2010-11-05 kl: 10:46:54 » http://emeliejr.blogg.se/
Koden funkar ju inte!
Anonym
Skriven den 2010-11-07 kl: 14:19:58 »
Emelie
Skriven den 2010-11-07 kl: 14:21:10 » http://moomlis.blogg.se/
Jag har en liten fråga angående där det står t.ex; hur många snöflingor som ska falla på bloggen. Jag vill jättegjärna ha den men fattar ingenting!



P.S. Om du kan kan du göra ett inlägg om hur man sätter in statistik på sin blogg? :)
Marika
Skriven den 2010-11-27 kl: 11:35:52 » http://tuffast.webblogg.se/
Den fungerar inte...
Skriven den 2010-12-30 kl: 17:47:34 »
Tack så hemskt mycket för hjälpen!

Det funkar helt perfekt!

Super fin blogg, dessutom!
lina
Skriven den 2011-02-07 kl: 19:47:44 »
hej ida! tack för en jättebra blogg.. men jag hittar inte <head> grejen!! Jag har stilmallen fashion på blogg.se, den kanske inte funkar där??? tacksam för svar.. KRAM!
Mathilda
Skriven den 2011-11-28 kl: 11:13:51 » http://mathildashundar.blogg.se/
Tack! Nu har också jag snö i min blogg :)
vilma
Skriven den 2011-11-28 kl: 17:52:28 » http://saahlqviist.devote.se
Hej alltså det går inte för mig för jag har devote är det skillnad?
Ida
Skriven den 2011-11-30 kl: 21:40:35 » http://idabrjson.blogg.se/
Tack så mycket! Blev jätte bra och de funkade som de skulle. Tyckte du hade en väldigt bra beskrivning!:)



Gå gärna in och kolla hur det blev:)
Isa =)
Skriven den 2011-12-01 kl: 18:26:11 » http://isagullbekk.blogg.se/
Tack så jätte mycket! Jag har letat hela dagen efter en mall som blir bra! Så ännu en gång, Tack!

Jag ska definitivt följa din blogg på bloglovin! Följa min? :)
Kerstin
Skriven den 2011-12-11 kl: 18:30:41 » http://blommanshandstickat.blogg.se/
Tusen tack för tipset, nu har jag också snö på min blogg ,men det täcker inte hela sidan och jag vet inte hur man ändrar detta. Det blev fint i alla fall.
Michelle
Skriven den 2012-01-30 kl: 22:07:31 » http://weforeverandtogether.devote.se
Asså du har verkligen en superfin blogg och tack så mycket för tipset!! :)
Anonym
Skriven den 2012-02-07 kl: 15:10:01 »
Underbar! Du inspererade mig med din blogg :)
Ebba Ohlén
Skriven den 2012-11-06 kl: 19:48:12 » http://ohlenss.blogg.se
TACK SÅ JÄTTE MYCKET! Har haft stor nytta av detta! kram
aline
Skriven den 2012-11-29 kl: 19:07:38 » http://palomino.bloggplatsen.se
Hej, jätte fin sida! Vet du om man kan få det att snöa på bloggplatsen? :)
Tsoler Keuchenian
Skriven den 2012-12-01 kl: 21:43:35 » http://tsoler.blogg.se/
Tack så jätte mycket! :)<3
Anonym
Skriven den 2012-12-16 kl: 12:53:44 »
funkar inte
Svar: använder du blogg.se eller webblogg.se? det är nämligen dom enda portalerna jag provat detta till..
Ida Tallhed
Anonym
Skriven den 2012-12-17 kl: 17:59:58 » http://sofeew.devote.se
hur gör du för att få ett hjärta som pil på bloggen?
Emma
Skriven den 2012-12-19 kl: 20:00:45 » http://emmammilossson.blogg.se
ÅH! ÄNTLIGEN, DET BLIR SÅ FINT! TACK FÖR HJÄLPEN!!! :)
Paulaz
Skriven den 2013-11-22 kl: 23:12:44 » http://paulaz.weebly.com
Åh *-* Tack jag har letat så länge efter hur man kådar in snö åh tack att du hjälpte mig


P.s jag är en 10 årig tjej :)
Svar: Var så god :)
Ida Tallhed