JavaScript / Tipps / Sternenstaub[IE|M|O|G]

Sternenstaub der vom Himmel fällt. Besonders um die Weihnachtszeit,
ist dieses JavaScript ein kleiner Blickfang auf der Homepage.

 

Beispiel anzeigen

 

Bilder:
stern.gif
stern.gif
17 x 17 Pixel
215 Byte
 stern2.gif
stern2.gif
17 x 17 Pixel
215 Byte

 

Quelltext: „Sternenstaub”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<body style="background-color: #000000;">
<!-- Body muß vor dem Script stehen! -->

<script type="text/javascript">
var Stern = 25;

var browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var browser_MOZ = (self.innerWidth) ? 1 : 0;

var Zeit;
var Stern_dx, Stern_xp, Stern_yp;
var Stern_am, Stern_stx, Stern_sty; 
var i, Stern_Browser_Breite, Stern_Browser_Hoehe;

if (browser_IE_NS){
    Stern_Browser_Breite = document.body.clientWidth;
    Stern_Browser_Hoehe = document.body.clientHeight;
}
else if (browser_MOZ){
    Stern_Browser_Breite = self.innerWidth - 20;
    Stern_Browser_Hoehe = self.innerHeight;
}

Stern_dx = new Array(); Stern_xp = new Array(); Stern_yp = new Array();
Stern_am = new Array(); Stern_stx = new Array(); Stern_sty = new Array();

for (i = 0; i < Stern; ++ i) { 
 Stern_dx[i] = 0; 
 Stern_xp[i] = Math.random()*(Stern_Browser_Breite-50);
 Stern_yp[i] = Math.random()*Stern_Browser_Hoehe;
 Stern_am[i] = Math.random()*20; 
 Stern_stx[i] = 0.02 + Math.random()/10;
 Stern_sty[i] = 0.7 + Math.random();
 var Stern_Bild = (i % 2) ? "stern.gif" : "stern2.gif";
 document.write("<\div id=\"Sternstaub"+ i +"\" ");
 document.write("style=\"position: absolute; z-index: "+ i +"; visibility: visible;\">");
 document.write("<\img src=\""+Stern_Bild+"\" border=\"0\"><\/div>");
}

function Sternenstaub() { 
for (i = 0; i < Stern; ++ i) { 
 Stern_yp[i] += Stern_sty[i];
  if (Stern_yp[i] > Stern_Browser_Hoehe-50) {
   Stern_xp[i] = Math.random()*(Stern_Browser_Breite-Stern_am[i]-30);
   Stern_yp[i] = 0;
   Stern_stx[i] = 0.02 + Math.random()/10;
   Stern_sty[i] = 0.7 + Math.random();
  }

    Stern_dx[i] += Stern_stx[i];

    document.getElementById("Sternstaub"+i).style.top=Stern_yp[i]+"px";
    document.getElementById("Sternstaub"+i).
style.left=Stern_xp[i] + Stern_am[i]*Math.sin(Stern_dx[i])+"px";
}

Zeit = setTimeout("Sternenstaub()", 10);

}
Sternenstaub();
</script>


Damit das Script auch im Internet Explorer 7 und 8 funktioniert, darf im
HTML-Code kein Doctype-Tag angegeben werden, so das die Browser im
"Quirks"-Modus laufen!
Das Doctype-Tag beginnt etwa so <!DOCTYPE HTML ...
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Kommentare: 9 » aufmachen   
agron matic:
sehr gutes java script

wischi:
jo mir gefällt es auch aber aus weklchem Grund auch immer habe ich nur einen Stern der oben links ganz alleine vor sich hin blinkt....was mach ich falsch?

wischi:
hat bereits geklappt

Martina:
Ist ja irre schön, Schneeflocken mitten im Sommer, tolles Teil.

wolf:
bei mir blinken die sterne nur oben und fallen nicht was habe ich falsch gemacht??

OskarGTI:
bei mir blinken sie auch nur was ist denn falsch

gabi:
find ich wunderschön...normal klappt es super,aber meine frage ist: kann man das auch in css einbinden??bin ein css neuling

Werner:
Nein, leider nicht.

gabi :
danke werner, das ist aber schade... ich höre doch immer überall mit css kann man so schöne seiten gestalten... also ist soetwas wie "sternenstaub" überhaupt möglich in einer zum beispiel myspace css seite?homepagegestaltung mach ich nach wie vor mit html und java script codes...aber bei myspace kann ich leider nur die css version gestalten.

Werner:
Mit CSS sind sehr schöne Effekte möglich. Du kannst zum Beispiel Absätze mit <p>-Tags eine andere Hintergrundfarbe (oder Hintergrundbild) geben. 
<style type="text/css">
p {
 background-color: #FFD7EB;
}
</style>
Schau in den (Browser-)Quelltext deiner Webseite, alle Tags die dort stehen kannst du auch mit CSS anpassen.

Lili:
hey, funzt das script auch genauso gut im iron browser? (ihr wisst schon, den chrome-clon ohne user-infos-speicherung ) den benutze ich nämlich seit einiger zeit (und bin sehr zufrieden), allerdings ist bei den skripts für den browser noch keine browsertests eingetragen

Werner:
Funktioniert auch im Chrome, gerade getestet.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
E-Mail Test - Überprüft ob die E-Mail-Adresse korrekt eingegeben wurde.  Javascript Fehler abschalten  JavaScript Grundkurs - 5. Ein- und Ausgaben  Mit JavaScript Text Umwandeln  Button Zähler  JavaScript Bausteine 12  JavaScript Bausteine 10  Fenstergröße und Fensterposition mit einem Link ändern  Eingabefeld fokusieren - Beim Laden der Seite wird das Eingabefeld fokusiert.  Goto - Zeigt eine bestimmte Position einer Seite.  Darstellungsmodus überprüfen - Darstellungsmodus der Webseite anzeigen.  Fenster mit Format öffnen (1)  Bei Bestätigung weiter - Nur wenn die Checkbox angeklickt wird, gelangt man mit dem Button auf die nächste Seite.  Silversurfer  Text suchen und markieren mit JavaScript - Mit diesem JavaScript können Sie nach Text innerhalb einer Seite suchen, die gefundenen Textstellen werden dann farbig hervorgehoben.  Eingabefeld automatisch fokusieren  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner