Javascript Schnee mit 3D Effekt – Schneeflocken

Filed under: Scripts & Codes — Schlagwörter: , , , , ,

Ein Java-Script, der es auf jeder HTML-Seite schneien lässt. Er unterscheidet sich jedoch von den üblichen Scripts, da er keine Grafiken verwendet und der Schnee nur in einem bestimmten Bereich auf der Seite schneit, denn eine Seite voller Schneeflocken sieht meistens ziemlich nervend aus. Die Schneeflocken haben verschiedene Größen und Fallgeschwindigkeiten, dadurch wird ein “realistischer” 3D-Effekt erzeugt ;-) .

Beim Einbau des JavaScript Schnees muss einfach nur die ID des HTML-Elements (zum Beispiel ein <div>) angegeben werden und schon fällt innerhalb des Rahmens des Elements Schnee.

JavaScript Schnee
JavaScript Schnee
js_schnee1.2.zip
Version: 1.2
2.2 KiB
4690 Downloads
Details...

Es können viele Einstellungen wie Farbe, Anzahl, Aussehen und Schwerkraft des JavaScript Schnee angepasst werden. Dazu einfach einen Blick in den JS-Code werfen. Dort ist alles beschrieben. Um den Javascript in eine HTML-Datei einzubinden, einfach folgendes in den head-Bereich einfügen:
<script type="text/javascript" src="./schnee.js"></script>
Die ID des HTML-Elements kann in der JS-Datei angepasst werden. Standard ist die ID “winter”. Wenn man es auf der gesamten Seite schneien lassen möchte, kann man dem HTML Body die ID “winter” geben:
<body id="winter">
Eine Beispieldatei ist enthalten, hier gibt es eine Demo des JavaScript Schnee.

  • viele Einstellungen des JavaScript Schnee, die in der JS-Datei angepasst werden können
  • hohe Vielseitigkeit der Schneeflocken, da Farbe, Größe und Schriftart zufällig gewählt werden
  • Verursacht kaum Traffic, da keine Grafiken verwendet werden
  • Verbraucht wenig Browser-Resourcen

Wer zu faul ist, den <script> Code jedes Jahr wieder an die richtige Stelle zusetzen, kann folgenden PHP-Code Verwenden:

<?php $month = (int)date('n'); if($month == 12 || $month == 1) { ?>
<script type="text/javascript" src="./schnee.js"></script>
<?php } ?>

Dieser lässt es dann automatisch im Dezember und Januar schneien!

JavaScript Schnee
JavaScript Schnee
js_schnee1.2.zip
Version: 1.2
2.2 KiB
4690 Downloads
Details...

56 Kommentare

  1. Fabi sagt:

    Ja stimmt, hatte den Code einfach aus meinem Template rauskopiert, ohne die $month Zuweisung. Jetzt stimmts aber, danke für die Hinweise.

  2. tadaa sagt:

    Hallo Fabi!

    Ob das so geht, will mir grad nicht in den Kopf. Daher hier mein simples Script:

    Nicht vergessen an die anderen, die erste Variabel muss über den Ausgaben liegen. ;)

    Dennoch eine Frage von mir: Wie kann man es ermöglichen den Schnee leicht durchsichtig/transparent zu machen?
    Danke!

    Lg, tadaa

  3. HIT sagt:

    Vielen Dank für das super Script, hat echt einwandfrei geklappt und wer möchte kann mal vorbei schauen:
    http://www.hit-honer.de

  4. Tao Nguyen sagt:

    Vielen Dank für das Script! Habe nichts vergleichbares gefunden, das so klein ist und vor allem die Performance schont! Vor allem genial, dass man das so einfach anpassen kann. Daumen hoch! Das Ergebnis könnt ihr auf http://www.e-kern.com/de anschauen

  5. Thomas sagt:

    Servus,

    nachdem ich einiges ausprobiert habe bin ich an deinem script hängengeblieben.
    Es funktioniert einwandfrei, im Gegensatz zu manch anderem was im inet so schneefallmäßig herumgeistert…
    Vielen Dank für dein script.
    Wer es sehen mag, here it is http://www.AlpenX-XL.de

    Beste Grüße
    Thomas

  6. Der Jörg sagt:

    Hi Fabian,

    ziemlich coole Sache das! Kann man es aber auch so steuern, daß bestimmte Bereiche nicht “beschneit” werden? Wenn ich das Tag im Body nutze, dann ist ja alles betroffen. Kann man da was ausschließen, z.B. ein Bild in der Mitte?

    Viele Grüße und weiter so,

    Der Jörg

Hinterlasse einen Kommentar

Notify me of followup comments via e-mail.

RSS Feed für Kommentare zu diesem Artikel. TrackBack URL