Schneefall Script


Einfach ein Textfeld aufziehen und das Script unten kopieren und in die Objekt-HTML
des Textfeldes “vor dem Tag” einfügen.

Hier könnt Ihr Euch noch diese Schneeflocke herunter laden, die Ihr dann in Euren Ordner

./assets/images

kopiert.

Achtet im Script (unten) auf die korrekte relative Pfadangabe zu der Schneeflocke, hier snow.gif, ich habe das im Script unten mal blau markiert.

auf allen “Unterseiten”, die sich in Eurem Ordner HTML befinden, zwei Punkte:

../assets/images/snow.gif

auf der “Home”, Eurer Startseite (index.html), dann nur ein Punkt:

./assets/images/snow.gif

Die Geschwindigkeit des Schneefalls bestimmt Ihr hier an dieser Stelle im Script unten. Ich habe das mal rot markiert:

Langsam fallende Flocke

speedX = flakeSpeed[i]*Math.cos(flakeStep2[i])/10;
speedY = flakeSpeed[i]*Math.sin(90*Math.PI/100);

Schnell fallende Flocke

speedX = flakeSpeed[i]*Math.cos(flakeStep2[i])/2;
speedY = flakeSpeed[i]*Math.sin(90*Math.PI/180);

<script language="JavaScript" type="text/javascript">
<!--
var numImages = 1;
var numFlakes = 20;
var ns  = (document.layers)?1:0;
var ns6 = (document.getElementById&&!document.all)?1:0;
var opera5 = (navigator.userAgent.indexOf("Opera") > -1 && document.getElementById) ? 1:0;
var winWidth  = (ns||ns6||opera5)?window.innerWidth-70:window.document.body.clientWidth;
var winHeight = (ns||ns6||opera5)?window.innerHeight:window.document.body.clientHeight;
var flakeX = new Array();
var flakeY = new Array();
var flakeSpeed = new Array();
var flakeStep  = new Array();
var flakeStep2 = new Array();
for (i=0; i<numImages; i++)
{
eval('imgFlake' + i + '=new Image();');
eval('imgFlake' + i + '.src="../assets/images/snow.gif";');
}
if (ns)
{
for (i=0; i<numFlakes; i++)
{
eval('var picSource=imgFlake' + Math.floor(Math.random()*numImages) + '.src;');
document.write('<LAYER name="layerFlake' + i + '" left="0" top="0"><IMG src="' + picSource + '"></LAYER>');
}
} else {
document.write('<DIV style="position:absolute;top:0px;left:0px"><DIV style="position:relative">');
for (i=0; i<numFlakes; i++)
{
eval('var picSource=imgFlake' + Math.floor(Math.random()*numImages) + '.src;');
document.write('<IMG id="layerFlake' + i + '" src="' + picSource + '" style="position:absolute;top:0px;left:0px">');
}
document.write('</DIV></DIV>');
}
for (i=0; i<numFlakes; i++)
{
flakeX[i] = Math.round(Math.random()*winWidth);
flakeY[i] = Math.round(Math.random()*winHeight);
flakeSpeed[i] = Math.random()*3+3;
flakeStep[i]  = Math.random()*0.1+0.05;
flakeStep2[i] = 0;
}
function fLetItSnow()
{
var winWidth  = (ns||ns6||opera5)?window.innerWidth-70:window.document.body.clientWidth;
var winHeight = (ns||ns6||opera5)?window.innerHeight:window.document.body.clientHeight;
var wscrll    = (ns||ns6||opera5)?window.pageXOffset:document.body.scrollLeft;
var hscrll    = (ns||ns6||opera5)?window.pageYOffset:document.body.scrollTop;
for (i=0; i<numFlakes; i++){
speedX = flakeSpeed[i]*Math.cos(flakeStep2[i])/2;
speedY = flakeSpeed[i]*Math.sin(90*Math.PI/180);
flakeX[i] += speedX;
flakeY[i] += speedY;
if (flakeY[i]>winHeight)
{
flakeX[i]=Math.round(Math.random()*winWidth);
flakeY[i]=-100;
flakeSpeed[i]=Math.random()*3+3;
}
if (ns)
{
document.layers['layerFlake' + i].left = flakeX[i];
document.layers['layerFlake' + i].top  = flakeY[i] + hscrll;
} else if (ns6||opera5) {
document.getElementById("layerFlake" + i).style.left = Math.min(winWidth,flakeX[i]);
document.getElementById("layerFlake" + i).style.top  = flakeY[i] + hscrll;
} else {
eval("document.all.layerFlake" + i).style.left = flakeX[i];
eval("document.all.layerFlake" + i).style.top  = flakeY[i] + hscrll;
}
flakeStep2[i]+=flakeStep[i];
}
setTimeout('fLetItSnow()', 20);
}
// -->
</script>
<script language="JavaScript">
<!--
fLetItSnow();
//-->
</script>

nach oben