fabi.me

Javascript Schnee ohne Grafiken , Schneeflocken

VN:F [1.9.22_1171]

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.

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.

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
Javascript Schnee ohne Grafiken , Schneeflocken, 4.8 out of 5 based on 5 ratings
JavaScript Schnee
JavaScript Schnee
js_schnee1.2.zip
Version: 1.2
2.2 KiB
9889 Downloads
Details

, , , , ,

Kommentare

  • Fabi sagt:
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Hier die Demo vom Javascript Schnee:
    http://fabi.me/misc/winter.html

  • Keybee sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Das Skript ist klasse, verbraucht wenig, BrowserFlashGames laufen noch alle flüssig wirklich das beste SchneeSkript dass ich bis jetzt gesehen hab :) auch dass man das in ne bestimmt ID einbauen kann, wirklich sehr gut!

  • oputz sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Hi, ganz große KLASSE das Script wegen der ID-Vergabe.
    Leider werden mir im FireFox die Flocken viel größer dargestellt als im IE. Woran kann das liegen bzw. was kann man dagegen tun?

    MfG oputz

  • oputz sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Frage hat sich erledigt. Sorry, “irgendjemand” hatte in der css ne riesige font-size angegeben. Den IE hat es nicht interessiert, nur den FF. *gg*

  • Fabi sagt:
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Habe das Skript nochmal durchgeschaut und auch einen Fehler gefunden. Eigentlich sollte die in CSS definierte Schriftgröße die Schneeflocken nicht stören. Im JavaScript-Code wurde die Schriftgröße nicht richtig gesetzt (ohne “px”), das IE und FF dann unterschiedlich interpretiert haben.
    Hab das Skript jetzt nochmal ziemlich überarbeitet. Neben dem genannten Bug wurden noch einige andere Kleinigkeiten behoben und der Code etwas optimiert.
    Außerdem heißen die Einstellungsvariablen jetzt etwas anders.
    Werde die neue Version 1.1 gleich hochladen.

  • oputz sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    funktioniert vorzüglich. nice job und besten dank!!! ;o)

  • VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Danke!, genau das habe ich gesucht, keine Grafik (*.jpg oder *.gif) Schnee Flöckli.
    mfg

  • oputz sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    mal ne frage. ich möchte es in zwei divs schneien lassen.
    schreibe ich die id`s untereinander, nimmt er nur das erste.
    var snow_area_id = ‘head2′;
    var snow_area_id = ‘head’;
    wie schreibt man es nebeneinander?

    gruß
    oputz

  • Fabi sagt:
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Das ist mit dem Skript leider nicht möglich.
    Werde mal nach ner einfachen Möglichkeit schauen, so dass man mehrere “Schneebereiche” festlegen kann.
    Eine Notlösung, die mit dem jetzigen Skript funktioniert, wäre ein IFRAME, in dem es auf einer anderen HTML-Seite scheit.

  • oputz sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    ok und danke erstmal. hab es anders gelöst. die betreffende seite wird aus einem template-dublikat gespeist und es schneit wie es soll. ;o)

  • Jan sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    super script!!! vielen dank…

  • Tim sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Ich habe das Problem, dass bei Firefox zum anfang die maximale Anzahl der FLocken oben in der Seite generiert wird, diese nach unten schneien und erst dann neue Folgen, es entsteht also eine längere Pause. Woran kann das liegen?

  • Fabi sagt:
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Wahrscheinlich liegt es daran, dass das Skript die Schneeflocken schon erstellt und positioniert hat, bevor Firefox die endgültige Größe des HTML-Containers (< div > usw.) festgestellt hat. Wenn zum Beispiel ein Bild ohne Größenangaben sich in dem Container befindet, wird die Größe erst angepasst, wenn das Bild geladen ist. Es kann also einige Zehntelsekunden dauern, bis alles auf der Seite seine Ordnung hat.
    Habe das Skript jetzt etwas umgeschrieben, so dass mit Hilfe der Variablen “snow_init_delay” eine Verzögerungszeit festgelegt werden kann, bevor es schneit. Zudem wird automatisch gewartet, bis die Breite und Höhe des HTML-Elements größer der maximalen Schneeflockengröße sind.
    snow_init_delay sollte Werte zwischen 50 und 1000 ms haben.

  • QDog sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Das script ist wirklich super schön anzusehen, aber ist noch niemandem aufgefallen, dass es den Browser zu fast 100% CPU Last zwingt? Bemerkt habe ich es auch nur als mein Notebook Lüfter plötzlich immer lauter wurde. Evtl. könnte man es dahingehend noch einmal optimieren.

  • Fabi sagt:
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Bei 20 Schneeflocken sollte man eigentlich keine CPU-Auslastung feststellen können. Bis 50 Flocken sollte alles flüssig laufen, danach kann es anfangen zu holpern, je nach Hardware. Der Skript ist weitgehend optimiert, mehr lässt sich so einfach nicht machen mit JavaScript und HTML.
    Hast du vielleicht keinen Grafiktreiber installiert oder die Hardwarebeschleunigung deaktiviert? Dann übernimmt der Prozessor das Zeichnen der Seite, was er lange nicht so gut kann wie eine Grafikkarte.

  • mg sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    hi. leise rieseln die schneeflöckchen … aber wie funktioniert es, mehrere unterschiedliche zeichen z.b. buchstaben oder zahlen schneien zu lassen? liebe grüße in die winterlandschaft.

  • Johannes sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Hallo Fabi!

    Inzwischen ist das Fabi-Schee-Script verschwunden? Wäre doch schön, es wieder zu haben…

    Gruß – Johannes

  • Fabi sagt:
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Geht wieder, danke für den Hinweis. Hatte seit gestern ein neues Plugin aktiviert, das falsch konfiguriert war.

  • Soyli sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    WoW Fabi,

    danke :) sowas hab ich die ganze zeit gesucht, wollte es nur im Headerbereich meiner Seite schneien lassen. Dank dir gehts nun… Vielen dank

  • mini sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    hi ich würd auch gern die flöckchen auf der HP haben kapier aber nicht was ich genau wo einfügen muss :( kann mir jemand helfen??

  • Aerendil sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Hi zuerstmal DAnke für das Script, es funktioniert in Teilen auch sehr gut, aber in meinem Fall wollte ich das Script wirklich über den gesamten Body laufen lassen und das geht nicht so wirklich, es geht zwar, aber nur soweit wie der body mit Inhalt gefüllt ist, gibt es aber auch eine Möglichkeit das auf das gesamte sichtbare Browserfenster zu übertragen? Hatte jetzt auch schon ein div mit width und height 100% versucht, aber nix geht immer nur soviel inhalt wie im div steht….

    Kannst du evtl mal ein Beispiel posten wo die Flocken über das komplette Browserfenster schneien?

  • steven sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    [ich brauch die schnee flocken

  • kuta sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    stier ist der gr?ste kuta

    stier und pinguin k?nnen net ihre sprache

    deswegen ist strache ihr boss alle 3schwule menschen

  • Kyrillos sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    Hallo seyfollah

  • Padshah sagt:
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

    He leute wie gehts euch.

1 2

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>