Schnee Script für die eigene Homepage// Let it snow

Download Mit einer PayPal-Spende dankenLetztes Update: 27.10.2019

Der Winter und Weihnachten stehen vor der Tür. So langsam wird es Zeit, auch die eigene Homepage dieser Zeit anzupassen.

Zum Beispiel mit diesem Schnee Script, das weitestgehend frei konfigurierbar ist!

Der Einbau ist grundsätzlich in 3 Schritten erledigt: Die gewünschte Grafik hochladen, das Script hochladen, in die Seite einbauen.


Passende TYPO3-Extension gefällig?

1) Die gewünschte Grafik hochladen

Rechtsklick auf die Grafik, "Grafik speichern unter..." wählen und die Grafik in das selbe Verzeichnis wie das Script speichern.

Natürlich kann dafür auch jede andere transparente Gif-Grafik genutzt werden...

2) Das Script hochladen

Nun muss der wichtigste Bestandteil des Scriptes hochgeladen werden, die JavaScript Datei snow.js.
Hier finden Sie die Script Datei: snow.js

Rechtsklick auf den Link, "Ziel speichern unter..." wählen und hochladen auf den eigenen Webspace.

Die Zeilen 11 bis 13 sind beliebig anpassbar. In den Kommentaren dahinter findet sich jeweils der Effekt, den eine Änderung hat. Es sollten nur die Zeilen 11 bis 13 verändert werden, sonst kann es zu Fehlfunktionen im Script kommen.

3) Das Script aufrufen

Nun muss das Script noch in die Seite eingebunden werden, auf der der Schnee fallen soll. Dies ist mit einer Zeile Code getan:

<script src="http://www.IhreDomain.de/snow.js" type="text/javascript"></script>

Diesen Code fügen Sie innerhalb der <body> ... </body> Tags ein, fertig. Nicht vergessen, die URL an die Ihre anzupassen!

FAQ

Wieso setzt sich der Schneefall beim Runterscrollen nicht über die gedachte Bildschirmunterkante fort?
Die Tatsache, wieso ich die Flocken nur über den zunächst sichtbaren Bereich schneien lasse, hat einige Gründe, die ich grob mit "Simplizität" beschreiben würde. Wenn ich die Dokument-Höhe als Ansatz nehmen würde, müsste der Nutzer bei der Konfiguration diese mit einbeziehen, und das verwirrt ihn nur.

Kurzes Beispiel: Er stellt 15 Schneeflocken mit einer Geschwindigkeit von 20 ein. Bei einem kurzen Artikel auf seiner Seite würde das passen. Auf einer Seite mit einem langen Artikel, die etwa 3000px hoch sein würde, würde der Schnee dennoch recht langsam fallen (speed: 20), und würde dementsprechend lange brauchen, bis er "unten" ankommt. In der Zeit, in der die Flocken weiter fallen außerhalb des Sichtbereichs, werden aber keine neuen Flocken erstellt, da max. 15 Flocken eingestellt wurden. Der Nutzer könnte die Anzahl der Flocken nun auf 50 erhöhen, aber dann wäre auf der Seite des kurzen Artikels fast nichts mehr zu erkennen vor lauter Flocken.

Wenn ich die sichtbare Höhe des Browser-Fenster als Ansatz nehme, kann der Nutzer davon ausgehen, dass das Ergebnis auf allen Seiten identisch ist, und er muss nicht jede seiner Seiten checken, um abzuschätzen, welche Konfiguration der beste Mittelweg wäre.

174 Responses

  1. Hey Leute,
    ich wollte mal fragen, wie das Einbinden funktioniert…
    Ich bin in dieser Beziehung ein ziehmlicher Laie, und habe alles Mögliche versucht, aber es bis jetzt leider nicht geschafft…
    Es wäre schön, wenn mir jemand schnell helfen könnte, da ich die Schnee-Saison für meine Webseite nicht verpassen möchte…
    momentan ist das Skript offensichtlich falsch, aber ich lasse es ainfach mal bei der letzten Änderung, da es ja momentan keine Funktion hat.
    Vielen Dank schon im Vorraus.

  2. Hey.

    ich würd das gern auf der Firmenseite einbinden. leider hab ich die über 1&1 erstellt da hab ich lediglich die möglichkeit im header was einzutragen. Funktioniert das hier dann auch? so recht gesehen das ich über n ftp da was hochladen kann hab ich nicht gefunden. wäre n schönes gimmick.

    viele liebe Grüße
    mona

    • Hey Mona,

      wenn du Quelltext bearbeiten oder Scripts einfügen kannst, dann kannst du das Schnee-Script nutzen. Allerdings beschränken “Massen-Hoster” wie 1und1 diesen Zugriff sehr oft aus Sicherheitsgründen.

  3. Hier sehe ich gerade einige Kommentare mit fragen wie das mit dem Schnee usw. funktioniert. Das allerwichtigste daran ist das mann sich mit dem verwenden von htlm Code beschäfftigt. Jeder Code hat eine Aufgabe. Und wenn mann das alles im einzelnen erklären wollte müsste mann sich auch noch ewig lange damit beschäfftigen wie die Zeit die mann nötig hatte es selber zu lernen.

  4. Den grössten Fehler den viele machen sich einfach was von anderen HP,s raus zu ziehen. Ist nämlich dumm wenn Automatische funktionen drinn hängen die die HP auf den Kopf stellen können.

  5. Vielen Dank für das Script, hab diesen Tipp auch gleich mal verlinkt in meinem Blog. Man muss schon aufpassen, wenn man ein komplettes Script benutzt, wenn man eine größere Webseite hat, die bereits viele Funktionen nutzt, jedoch bezweifle ich das viele Firmen sich so ein Script einbauen.

  6. Habe das script für die Homepage eines guten Freundes benutzt, allerdings nicht für Schneeflocken sonder statt der Schneeflocken fliegen da Bienchen. Es wäre aber schöner wenn die Bienen von unten nach oben fliegen würden. Wäre das auch möglich.

    MFG Andreas

  7. Hi!
    Bei mir hat es erst funktioniert, als ich das Script direkt integriert habe, mit dem externen Link komischerweise nicht.
    Aber funktioniert super und sieht total schön aus!

    Vielen Dank!

  8. Hallo!

    Auch ich probiere mit dem Script gerade mal ein wenig herum …

    Irgendwie bringt die Änderung der Parameter leider keine Änderung?!

    Wie ist denn der Min,- bzw. Max.-Wert für die Anzahl der Flocken und/oder der Geschwindigkeit?!

    Gruß,
    Nils

  9. ich hab das Script in meine Weblica Seiten eingebaut und alles funktioniert einwandfrei…..sieht sehr gut aus, danke für das Script.

  10. Hallo Oliver,

    ich habe dein Script in meine Webseite “www.joggen-in-nrw.de” eingebaut.
    Bei Firefox, Opera und Crome läuft alles super.
    Bei IE7 und IE8 klappt es leider nicht, leider schauen immer noch zu viele Leute damit auf meine Seite.

    Ich habe mit meinem Dreamweaver mal ein alert hier eingesetzt und sehe das IE hier nicht hinkommt.

    } else if( this.ie4up || this.ns6up ) {
    alert(“bingo”)
    if (this.i == 0) {

    Gruß Klaus

  11. Hallo Oliver,

    dein Link läuft im IE7/IE8.
    Es scheint wohl so, dass sich die Scripte nicht vertragen. Ich benutze Mootools und auch einige Selbstentwicklungen.
    Dann muß ich mal versuchen einige Scripte abzuschalten, vielleicht scheint ja auch bald die Sonne!

    Vielen Dank für deine Antwort und ein schönes Weihnachtsfest.
    Klaus

  12. Hakko !
    Ich habe den Schnee eingebaut. Es schneit auch gut, allerdings bei Chrome und Opera nur solange bis man die Seite nach oben schiebt, dann hört der Schnee auf der gedachten Linie Bildschirmende, die ja dann nach oben wandert , auf. Kann man das ändern ???

    Danke für den Schnee und für die Anwort.
    Viele Grüße aus dem verschneiten Ulm
    Udo

  13. Also ich habe jeden schritt verfolgt, aber anscheinend funktioniert es nicht bei mir.
    Ich habe auch über mehrere Browser geguckt, aber bei keinem zu sehen

  14. Habe das gleich Problem wie Udo. Wenn die Seite gescrollt wird endet das schneien am gedachten Bildschirmende. Kann man sowas beheben?

  15. hallo,

    muss ich am js code die domain auch noch ändern??
    rein soll das ganze in meinen chat.

    weil wenn ich alles einspiele wie beschreben gehts leider nicht ohne änderungen.

    soll die js in den ordner js und die grafik auch dort rein in die js oder in pic ordner

    http://www.powerstarradio.at/pcpin_chat_v622

    * Schnee-Script
    * @author Oliver Schlöbe
    * @example http://www.schloebe.de/scriptdemos/schloebe_snow/snowtest.html
    * @link http://www.schloebe.de/scripts/schnee-script/
    * @since 111112
    */

    var schloebesnow = {
    no: 15, // Anzahl der Schneeflocken
    speed: 20, // “Schnei-Geschwindigkeit”; je kleiner die Zahl, um so schneller fallen die Flocken
    snowflake: “http://www.schloebe.de/wp-content/themes/schloebe_de/images/snow/snow.gif”, // Bild der Schneeflocke, beliebig
    /*********************************/

  16. Hi,

    wer auch das Problem hat das es im Internet Explorer nicht angezeigt wird der möge seine Skriptzeile z.B.:
    …im einfügen, dann gehts. Steht ja auch so in der Anleitung aber kann man ja leicht überlesen 😉

    Grüße und schöne Weihnachten 🙂

  17. Hallo!
    Bengie
    December 24, 2012 at 9:16 pm

    Hi,

    wer auch das Problem hat das es im Internet Explorer nicht angezeigt wird der möge seine Skriptzeile z.B.:
    …im einfügen, dann gehts. Steht ja auch so in der Anleitung aber kann man ja leicht überlesen

    Leider werde ich aus diesem Text nicht schlau:::: Skriptzeile z.B.: …im einfügen
    Was soll ich einfügen ????
    Dank im voraus für die Antwort.
    Udo

  18. Hallo,

    ich muss mich jetzt mal hier bedanken!

    Endlich etwas gefuden das funktioniert!

    Ich habe es jetzt mit dem Herbst laufen. Super

    vielen Dank

  19. Ein riesengrößes Dankeschön! Bin zwar auch mehr oder weniger Laie, hat aber auf Anhieb super funktioniert. Gut zu verstehende Anleitung, alles bestens.

    • Weder noch. Einfach die Grafik hochladen, die Javascript-Datei und in deiner Seite aufrufen (siehe Schritt 3 oben).

  20. Ich habe das Script eingebaut, funktioniert auch ganz gut, aber ich habe bei den Grafiken immer einen Rand, hab schon versucht das wegzubekommen, find aber leider nix.

    Kann mir da bittejemand helfen?

    LG
    Guntram

  21. Tolles Skript, danke. Bei mir zeigt sich ein kleiner, etwas lästiger Effekt in der linken oberen Browser-Ecke. Beim FF, Chrome, IE und Opera – jeweils aktuellste Versionen – bleibt jeweils eine Schneeflocke fest stehen. Wie bekommt man die in Bewegung?

    • Du hast mein Script zweimal eingebunden. Die zuerst eingebundenen fühlen sich dann von den zuletzt eingebundenen Flocken verarscht und stehen deshalb alle eingeschnappt in der Ecke. 🙂

  22. oh, peinlich. Das war noch ein Rest einer anderen Idee, die ich aber nicht zum Laufen ebracht hatte. Danke. Und vielleicht wird ja aus dem virtuellen noch richtiger Schnee 🙂

        • Habe das Script dann auch gleich mal angepasst, sodass das Script mehrfach eingebunden werden kann, ohne den Fehler, den Du hattest. So hatte das Ganze dann doch noch was Gutes für andere, die das selbe Problem haben. 🙂

  23. Hallo zusammen,
    es wurde schon ein paar mal nachgefragt ob man die Schneeflocken irgendwie tiefer fallen lassen kann, also wenn man auf der HP runterscrollt ist ja leider kein schnee mehr. Gibts dafür inzwischen ne lösung?
    Und noch ein dickes Lob für den Olli, tolles Script und gut erklärt.
    Frohe Weihnachten allen.

  24. Bei mir funktioniert das Schneetreiben bestens, allerdings setzt sich der Schneefall beim runterscrollen nicht über die gedachte Bildschirmunterkante fort…sehr schade.
    Gibt es dafür noch keine Lösung?

    Frohe Weihnachten für euch alle!

    • Hallo Dieter und Andy,

      die Tatsache, wieso ich die Flocken nur über den zunächst sichtbaren Bereich schneien lasse, hat einige Gründe, die ich grob mit “Simplizität” beschreiben würde. Wenn ich die Dokument-Höhe als Ansatz nehmen würde, müsste der Nutzer bei der Konfiguration diese mit einbeziehen, und das verwirrt ihn nur.

      Kurzes Beispiel: Er stellt 15 Schneeflocken mit einer Geschwindigkeit von 20 ein. Bei einem kurzen Artikel auf seiner Seite würde das passen. Auf einer Seite mit einem langen Artikel, die etwa 3000px hoch sein würde, würde der Schnee dennoch recht langsam fallen (speed: 20), und würde dementsprechend lange brauchen, bis er “unten” ankommt. In der Zeit, in der die Flocken weiter fallen außerhalb des Sichtbereichs, werden aber keine neuen Flocken erstellt, da max. 15 Flocken eingestellt wurden. Der Nutzer könnte die Anzahl der Flocken nun auf 50 erhöhen, aber dann wäre auf der Seite des kurzen Artikels fast nichts mehr zu erkennen vor lauter Flocken. Ihr erkennt das Dilemma? 🙂

      Wenn ich die sichtbare Höhe des Browser-Fenster als Ansatz nehme, kann der Nutzer davon ausgehen, dass das Ergebnis auf allen Seiten identisch ist, und er muss nicht jede seiner Seiten checken, um abzuschätzen, welche Konfiguration der beste Mittelweg wäre.

  25. Hey Leute

    erstmal große Dankeschön läuft super 🙂

    Ein Problem besteht jedoch es läuft einfach nicht im InternetExplorer 9 , bei Chrome funktioniert es .
    Habe hier schon die Kommentare gelesen und das Problem haben einige andere auch aber eine Lösung gibt es nicht oder ?

    mfg

    • Hallo Micha, habe es gerade mal probiert im IE9. Bei mir funktioniert das Script. Was geht denn bei dir nicht bzw. hast du einen Link zur Seite mit dem Problem? 🙂

  26. Funktioniert bei meiner Seite eigentlich sehr gut. Aber es kommt immer wieder vor, dass eine Flocke (Wenn sie ganz rechts am Bildschirmrand herunter kommt) durch das hin- & herschwanken kurzzeitig über den rechten Seitenrand fliegt und dadurch die Leiste zum links-rechts-scrollen (am unteren Fensterrand) immer wieder (im Sekundentakt) aufscheint und wieder verschwindet. Kann man das irgendwie verhindern? Ich hoffe meine Frage wird verstanden. Hier meine Website: http://bit.ly/1NQvR1H
    Das Problem tritt zwar eher selten auf, stört mich aber trotzdem 😉

  27. Tolles Script!

    Leider habe ich noch nicht herausgefunden, wie ich es als externes eingebundenes Script ausführen kann (es passiert einfach nichts)..zweimaliges Einbinden hat leider auch nicht funktioniert (mit z.B. zwei unterschiedlichen Bildern..).
    Ich würde mich über ein kurzes Feedback freuen und wünsche schon einmal eine tolle Adventszeit!

  28. Hallo,

    ich habe mich hier schon fast komplett durchgelesen, leider bin ich anscheinend zu blöd die Schneeflocken auf dem Baukasten Pro von Strato einzubauen. Habt ihr da irgendwelche Tips für mich?

    LG

    Wolfgang

Leave a Comment