La neu al teu web
Per fer que nevi al teu web hi ha diferents formes, jo la que he provat més funcional per a tots els navegadors és la següent.
Opció 1:
Insertem dintre del <body> en HTML el seguent codi
<marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 95px; top: 0px; width: 16px; height: 60px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 115px; top: 0px; width: 16px; height: 70px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 116px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 132px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 148px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 214px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 330px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 246px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 312px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 338px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 354px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 370px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 386px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 402px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 418px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 434px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 450px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 466px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 482px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 598px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 614px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 894px; top: 15px; width: 16px; height: 260px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 630px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 646px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 662px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 678px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 694px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 710px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 726px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 742px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 758px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 774px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 974px; top: 35px; width: 16px; height: 160px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 790px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 806px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 812px; top: 15px; width: 16px; height: 600px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 828px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 844px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 860px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 876px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 892px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 898px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 900px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 90px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 180px; top: 5px; width: 16px; height: 570px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 206px; top: 15px; width: 16px; height: 600px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 399px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 409px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 520px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 656px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 865px; top: 55px; width: 16px; height: 400px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 370px; top: 65px; width: 16px; height: 410px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 290px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 425px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 580px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 306px; top: 15px; width: 16px; height: 300px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 599px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 609px; top: 25px; width: 16px; height: 180px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 1070px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 950px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 260px; top: 55px; width: 16px; height: 200px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 770px; top: 65px; width: 16px; height: 210px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 690px; top: 35px; width: 16px; height: 360px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 925px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 225px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 380px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 806px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 399px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 909px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 570px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 750px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 660px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 690px; top: 5px; width: 16px; height: 60px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 965px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 1000px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 1010px; top: 0px; width: 16px; height: 150px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #fff; position: absolute; left: 390px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 466px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 359px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 489px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 530px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 780px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 910px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 620px; top: 5px; width: 16px; height: 160px;" scrollamount="7"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #D8D8D8; position: absolute; left: 300px; top: 0px; width: 16px; height: 100px;" scrollamount="1"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #A4A4A4; position: absolute; left: 890px; top: 0px; width: 16px; height: 200px;" scrollamount="5"><span >*</span></marquee><br /> <marquee behavior="scroll" direction="down" style="color: #F2F2F2; position: absolute; left: 840px; top: 10px; width: 16px; height: 100px;" scrollamount="7"><span >*</span></marquee>
D’aquesta forma caurà neu i el color dels flocs el podeu canviar a la següent línia
style="color: #A4A4A4;
Opció B:
Més maco però només es mostra en iExplorer però és molt més maca
<script language="JavaScript1.2">
//Configura la URL de la imagen
var snowsrc="snow.gif"
//Selecciona cuantas imagenes quieres que aparezcan
var no = 10;
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><a href="http://dynamicdrive.com/"><img src='"+snowsrc+"' border="0"></a></layer>");
} else {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src='"+snowsrc+"' border="0"></layer>");
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>");
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}
function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", 10);
}
if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
</script>
