Schneefall-Script

Hallo |

Sollen wir uns den Rest denken?

Auch wenn das Schneefall-Skript recht bekannt ist, wissen wir trotzdem nicht, wie der Quellcode aussieht.

In welcher Sprache ist das überhaupt geschrieben?

greez
JoSsiF

Oh sorry.  Es ist ein Javascript.  Hier hänge ich es mal unverändert dran:

<!-- Das Schneefall-Script beginnt hier -->
<script type="text/javascript">
<!-- fall Script by [email protected]

/* NUR HIER AENDERUNGEN VORNEHMEN UND ANPASSEN */

Amount=10;   // Anzahl der Schneeflocken


/* AB HIER BITTE NICHTS AENDERN */

//Pre-load your image below!
Image0=new Image();
Image0.src="http://scripte.aaj.de/grafik/flocke1.gif";
Image1=new Image();
Image1.src="http://scripte.aaj.de/grafik/flocke2.gif";
Image2=new Image();
Image2.src="http://scripte.aaj.de/grafik/flocke3.gif";
Image3=new Image();
Image3.src="http://scripte.aaj.de/grafik/flocke4.gif";
Image4=new Image();
Image4.src="http://scripte.aaj.de/grafik/flocke5.gif";

grphcs=new Array(5)
grphcs[0]="http://scripte.aaj.de/grafik/flocke1.gif"
grphcs[1]="http://scripte.aaj.de/grafik/flocke2.gif"
grphcs[2]="http://scripte.aaj.de/grafik/flocke3.gif"
grphcs[3]="http://scripte.aaj.de/grafik/flocke4.gif"
grphcs[4]="http://scripte.aaj.de/grafik/flocke5.gif"

Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
rndPic=grphcs[Math.floor(i*0.5)];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"><\/LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
rndPic=grphcs[Math.floor(i*0.5)];
document.write('<img id="si" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('<\/div><\/div>');
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
 Ypos = Math.round(Math.random()*WinHeight);
 Xpos = Math.round(Math.random()*WinWidth);
 Speed= Math.random()*3+2;
 Cstep=0;
 Step=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed*Math.sin(90*Math.PI/180);
sx = Speed*Math.cos(Cstep);
Ypos+=sy;
Xpos+=sx;
if (Ypos > WinHeight){
Ypos=-60;
Xpos=Math.round(Math.random()*WinWidth);
Speed=Math.random()*5+2;
}
if (ns){
document.layers['sn'+i].left=Xpos;
document.layers['sn'+i].top=Ypos+hscrll;
}
else{
si.style.pixelLeft=Xpos;
si.style.pixelTop=Ypos+hscrll;
}
Cstep+=Step;
}
setTimeout('fall()',10);
}
fall()
//-->
</script>
<!-- Das Schneefall-Script endet hier -->
 

Wie das geht mit "von unten nach oben" weiss ich jetzt nicht. Aber das mit den Fotos sollte hinkommen !

Image0=new Image();
Image0.src="http://scripte.aaj.de/grafik/flocke1.gif";
Image1=new Image();
Image1.src="http://scripte.aaj.de/grafik/flocke2.gif";
Image2=new Image();
Image2.src="http://scripte.aaj.de/grafik/flocke3.gif";
Image3=new Image();
Image3.src="http://scripte.aaj.de/grafik/flocke4.gif";
Image4=new Image();
Image4.src="http://scripte.aaj.de/grafik/flocke5.gif";

grphcs=new Array(5)
grphcs[0]="http://scripte.aaj.de/grafik/flocke1.gif"
grphcs[1]="http://scripte.aaj.de/grafik/flocke2.gif"
grphcs[2]="http://scripte.aaj.de/grafik/flocke3.gif"
grphcs[3]="http://scripte.aaj.de/grafik/flocke4.gif"
grphcs[4]="http://scripte.aaj.de/grafik/flocke5.gif"
In diesem Teil wo die Links stehen kannst du eben die Links zu deinen eigenen Bildern reinschreiben.
Am besten wäre noch das die Bilder nicht in Originalgröße sind sondern recht klein.

MFG
TOMEK

Vielen Dank.  Ja dass ich die Links auswechseln muss, das ist mir ja schon klar.  Aber wie bekomme ich das hin, dass die Bilder wiederholterweise in verschiedenen Höhen auch versetzt nebeneinander nach oben steigen - halt wie Ballons.  Die Bilder sind 285x464 Pixel groß.

Evtl. Geht das auch über die Marquee-Funktion, aber da hab ich dann ja nur in jeder Zeile ein Bild und kann das nicht versetzen.

Hat da jemand einen Tip?  Oder weiss sonst noch jemand, wie man das Script entsprechend anpassend kann?

Die Schneeflocken fallen doch auch gleichzeitig nebeneinander nach unten, auch Flocken gleichen Typs. Warum sollten das die Bilder nicht tun?

Die Marquee-Funktion kannst du eigentlich außer Acht lassen, die ist nicht flexibel genug für deine Zwecke.

greez
JoSsiF

Ich weiss bloß nicht, wo man die Richtung so genau ändert.  Ich habe mehrer Werte einfach mal von positiven Zahlen in negative geändert und dann war die Richtung auch von unten nach oben - aber alle Bilder steigen halt dann nur einmal.   Sie sollen ja immer wieder in einer Endlosschleife hochsteigen.Und wenn man die Geschwindigkeit noch etwas verlangsamen könnte.... das wär supi.

Nur kenne ich mich mit diesem Script überhaupt nicht aus und weiß nicht, wie ich gezielt sowas einstellen kann.

Wo sind die Profis????

OK, hab dir die paar Werte schnell angepasst. Das sollte nach deinen Vorstellungen sein

<!-- Das Schneefall-Script beginnt hier -->
<script type="text/javascript">
<!-- fall Script by [email protected]

/* NUR HIER AENDERUNGEN VORNEHMEN UND ANPASSEN */

Amount=10;   // Anzahl der Schneeflocken


/* AB HIER BITTE NICHTS AENDERN */

//Pre-load your image below!
Image0=new Image();
Image0.src="http://scripte.aaj.de/grafik/flocke1.gif";
Image1=new Image();
Image1.src="http://scripte.aaj.de/grafik/flocke2.gif";
Image2=new Image();
Image2.src="http://scripte.aaj.de/grafik/flocke3.gif";
Image3=new Image();
Image3.src="http://scripte.aaj.de/grafik/flocke4.gif";
Image4=new Image();
Image4.src="http://scripte.aaj.de/grafik/flocke5.gif";

grphcs=new Array(5)
grphcs[0]="http://scripte.aaj.de/grafik/flocke1.gif"
grphcs[1]="http://scripte.aaj.de/grafik/flocke2.gif"
grphcs[2]="http://scripte.aaj.de/grafik/flocke3.gif"
grphcs[3]="http://scripte.aaj.de/grafik/flocke4.gif"
grphcs[4]="http://scripte.aaj.de/grafik/flocke5.gif"

Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
rndPic=grphcs[Math.floor(i*0.5)];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"><\/LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
rndPic=grphcs[Math.floor(i*0.5)];
document.write('<img id="si" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('<\/div><\/div>');
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
 Ypos[i] = Math.round(Math.random()*WinHeight);
 Xpos[i] = Math.round(Math.random()*WinWidth);
 Speed[i]= (Math.random()*2+1) * -1;
 Cstep[i]=0;
 Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] < 0){
Ypos[i]=WinHeight;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=(Math.random()*2) * -1;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else{
si[i].style.pixelLeft=Xpos[i];
si[i].style.pixelTop=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',10);
}
fall()
//-->
</script>
<!-- Das Schneefall-Script endet hier -->

greez
JoSsiF

Ich werd bekloppt!  Du hast das geschafft!!!  Genauso meinte ich das!!!!  Daaaaaaaaankeeeeeee!!!  Aber verrat mir mal, was Du jetzt genau geändert hast, denn ich hab zwar die Richtung und die Geschwindigkeit ändern können, aber die Endlosschleife blieb immernoch unterbrochen so dass die Flocken nur einmal hochstiegen und dann weg waren.  Aber jetzt kommen immer wieder neue!!!


Suuuper!!!!  Großes Lob!!!!

*freu*  Immer wieder schön, wenn man jemanden so einfach und schnell erfreuen kann!

Schau mal: Es gibt in dem Skript eine Funktion namens fall(). Dort drin läuft die ganze Geschichte mit der Bewegung ab. Entscheidend war in diesem Fall dieser Teil:

if (Ypos[i] < 0){
 Ypos[i]=WinHeight;
 Xpos[i]=Math.round(Math.random()*WinWidth);
 Speed[i]=(Math.random()*2) * -1;
}

(Das ist jetzt schon die neue Version)

Da wird jetzt geprüft, ob eine Grafik das obere Ende (also Position kleiner Null) erreicht hat. Vorher wurde auf das Erreichen des unteren Endes geprüft (steht in der Variablen WinHeight).

Ist die Bedingung erfüllt, wird die Startposition der Grafik neu gesetzt, und das ist jetzt nicht mehr die obere Bilschirmkante, sondern die untere. Auch die Geschwindigkeit wird hier per Zufall nochmal neu gesetzt, damit dieser Unterschied zustandekommt. Folglich muss auch da ein negativer Wert gesetzt werden.

Das war's eigentlich schon

Viel Spaß damit und danke für das nette Feedback

greez
JoSsiF

Ist ja supi.  So im Nachhinein ganz einfach - wenn man mal drüber nachdenkt.  Aber ich bin jetzt echt schon seit mehreren Tagen am grübeln und Ausprobieren gewesen und denk mir - das muss doch irgendwie möglich sein....

Und Du machst das mal eben in 2 Minuten!!!  Toll!!!!

Supi vielen Dank nochmals!!!  Hast es echt drauf!  Und ich komme endlich mal weiter hier!!!

Viele Grüße und sorry - dass Du Dir meinen Kopf zerbrechen musstest!!!

Viele Grüße und sorry - dass Du Dir meinen Kopf zerbrechen musstest!!!

Sowas machen wir doch jeden Tag hier