Schneeflocken für ihre Seite
Langsam vom oberen Bildrand einschwebende Objekte, deren horizontale Position während des 'Falls' zusätzlich stetig verändert wird, erzeugen die realistisch wirkende Illusion von fallenden Schneeflocken, Herbstlaub oder tanzenden Seifenblasen.
Dieses JavaScript habe ich nicht selbst geschrieben! Ich verwende es allerdings in meinen Advetskalender-Beispielen. Da es sich auch für andere Anwendungen (z.B. fallendes Laub) eignet, hier eine separate Beispielseite zum Script.
Schneefallscript: © Altan - Copyright-Info Webseite des Autors
Ein Wintermotiv oder einen netten Gruß zum Jahreswechsel per HTML-Seite ist doch ganz nett. Da kommt dieses JavaScript für Schneeflocken gerade recht. Flocken fallen leicht und tanzend und 'schmelzen' in Bodennähe.
Das gleiche Script eignet sich auch für die Darstellung von Seifenblasen. Siehe dazu die Beispieldatei Demo2. Aber auch hier sind ihrer Phantasie keine Grenzen gesetzt. Einschwebende Heißluftballons, landende Ufos, ... . Auf einer Weihnachtskarte für Wüstenrennmäuse habe ich an einem Fallschirm hängende Rennmäuse landen lassen.
Aufwand
1) Einfach den Script-Code in den BODY-Bereich kopieren.
2) Das Schneflocken-Image herunterladen (snow.gif rechtsklicken) und in das gleiche Verzeichnis (Ordner) der HTML-Datei speichern.
Öffnen sie das Pop-Up-Window um den Quellcode zu kopieren und fügen ihn in ihre Seite ein. Nur noch das entsprechende Image einbinden, fertig.
Schneeflocken-Images:
 |
snow.gif Standardgrafik |
 |
schnee01.gif (animiert) |
|
seifenblase.gif |
... ich habe ein wenig "gewerkelt" und weitere Grafiken hergestellt:
 |
schnee02.gif |
 |
schnee03.gif | | |
 |
snow07.gif |
 |
snow08.gif |
 |
snow08a.gif |
 |
snow08ani.gif |
 |
snow08b.gif |
 |
snow08c.gif |
 |
snow08d.gif |
 |
snow08e.gif |
 |
snow09.gif |
Anpassen
Zur Anpassung der Informationen für die Schneeflocken ändern sie im Script:
| Variable |
hier im Beispiel |
beeinflusst |
| var no = 5; |
5 |
Anzahl der Images (Flocken) |
| var snowsrc="snow.gif;" |
snow.gif |
URL (Verweis) für das Image |
|
Im JavaScript wird vorausgesetzt, dass die Datei "snow.gif" (die Schneeflocke) im gleichen Verzeichnis wie die HTML-Datei steht.
Falls die Schneeflocken-Grafik nicht im selben Ordner abgelegt wurde oder sie eine andere Grafik einbinden möchten, müssen sie den entsprechenden Dateinamen eintragen und/ oder entsprechnde Angaben zum Pfad notieren.
Würde das Image für die Scheeflocke im übergordneten Ordner abgelegt, müsste folgendes eingetragen werden:
var snowflake = "../snow.gif";

|