Schnee, Blätter und sonstige Objekte auf der Homepage - runterfallen, schneien oder regnen zu lassen funktioniert relativ einfach mit JavaScript.
Auf persönlichen Wunsch eines Freundes - von Gutefrage.net - hier ein paar Tipps wie man ein fertiges Schnee-Script - in ein Pfoten-Script umwandeln und in die eigene Seite einbauen kann.
Download des Scriptes
http://www.peters1.dk/webtools/javascript/sne.php?sprog=en
Einbindung in die Homepage
Die Heruntergeladene Datei in das Verzeichnis scripts kopieren, wenn nicht vorhanden, das Verzeichnis anlegen. Wer möchte kann natürlich jeden beliebigen anderen Namen für sein JavaScript-Verzeichnis verwenden, in diesem Fall muss bei dem einzubindenden Code, das Verzeichnis entsprechend angepasst werden.
Den unten stehenden Code, im Body einbinden (nach <body>):
<script type="text/javascript" src="http://www.deine-domain.de/scripts/snow.js"></script>
Verwendung in CMS' (Content Management System)
Wird ein Contentmanagement verwendet, dann muss die Einbindung so erfolgen, wie das für ausführbaren Code vorgesehen ist.
D.h. wenn im Editor kein JavaScript erlaubt ist, dann muss der Code als Modul eingebunden werden. Ein Beispiel für Joomla und WordPress folgt.
Soll es auf allen Seiten Pfoten regnen, dann kann der Code direkt im Template eingebunden werden.
////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////
var SNOW_Picture = "http://doku.major-online.de/images/stories/katzenpfote.png"
var SNOW_no = 15;
var SNOW_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var SNOW_browser_MOZ = (self.innerWidth) ? 1 : 0;
var SNOW_browser_IE7 = (document.documentElement.clientHeight) ? 1 : 0;
var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty;
var i, SNOW_Browser_Width, SNOW_Browser_Height;
if (SNOW_browser_IE_NS)
{
SNOW_Browser_Width = document.body.clientWidth;
SNOW_Browser_Height = document.body.clientHeight;
}
else if (SNOW_browser_MOZ)
{
SNOW_Browser_Width = self.innerWidth - 20;
SNOW_Browser_Height = self.innerHeight;
}
else if (SNOW_browser_IE7)
{
SNOW_Browser_Width = document.documentElement.clientWidth;
SNOW_Browser_Height = document.documentElement.clientHeight;
}
SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();
for (i = 0; i < SNOW_no; ++ i)
{
SNOW_dx[i] = 0;
SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-50);
SNOW_yp[i] = Math.random()*SNOW_Browser_Height;
SNOW_am[i] = Math.random()*20;
SNOW_stx[i] = 0.02 + Math.random()/10;
SNOW_sty[i] = 0.7 + Math.random();
if (i == 0) document.write("<\div id=\"SNOW_flake"+ i
+"\" style=\"position: absolute; z-index: "+ i
+"; visibility: visible; top: 15px; left: 15px;\">
<a href=\"http://www.peters1.dk\" target=\"_blank\">
<\img src=\""
+SNOW_Picture+"\" border=\"0\"></a><\/div>");
else document.write("<\div id=\"SNOW_flake"+ i
+"\" style=\"position: absolute; z-index: "+ i
+"; visibility: visible; top: 15px; left: 15px;\">
<\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");
}
function SNOW_Weather()
{
for (i = 0; i < SNOW_no; ++ i)
{
SNOW_yp[i] += SNOW_sty[i];
if (SNOW_yp[i] > SNOW_Browser_Height-50)
{
SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);
SNOW_yp[i] = 0;
SNOW_stx[i] = 0.02 + Math.random()/10;
SNOW_sty[i] = 0.7 + Math.random();
}
SNOW_dx[i] += SNOW_stx[i];
document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";
document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i] + SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";
}
SNOW_Time = setTimeout("SNOW_Weather()", 10);
}
SNOW_Weather();
Je nachdem, was auf der Homepage runterfallen soll, benötigt man dafür eine passende Grafik. Bilder von anderen Homepages zu "mopsen" und auf der eigenen Homepage zu verwenden, ist nicht nur unfair, sondern verstößt u.U. auch gegen das Urheberrecht.
D.h. entweder erstellt man seine Grafiken mit einem Grafikprogramm (Gimp, paint.net usw.) selbst oder man sucht sich passende Grafiken auf Seiten, die diese ausdrücklich zur Verwendung auf der eigenen Homepage erlauben.
Katzenpfote malen
Zuerst "überredet" man eine Katze mal das Pfötchen von unten zu zeigen. Dies kann unter Umständen ca. 3-4 Tage dauern und auch ein paar zerkratzte Hände zur Folge haben.
Wenn man dann weiss, wie das Teil aussieht, macht man sich eine Skizze. Diese Skizze kann man dann in den Rechner übertragen (einscannen bzw. abmalen).
Wer ein Grafiktablett oder Touchscreen besitzt, sollte sich für die Variante abmalen entscheiden, weil so direkt ohne Hintergrund (transparenter Hintergrund ) gearbeitet werden kann und die Pfote nicht nachträglich freigestellt werden muss.
Wenn man die Grafik relativ gross - hier 400 x 400 Pixel erstellt, macht es gar nichts, wenn die Kanten nicht 100% rund sind, bei der anschließenden Verkleinerung verschwinden kleinere Zacken sozusagen von alleine.
Danach wird die Pfote auf die gewünschte Größe verkleinert, z.B. 40 x 40 Pixel.
Demo: Pfoten regnen
Herbstlaub - fallende Blätter
Blätter fallen nicht unbedingt regelmäßig ausgerichtet nach unten, d.h. hier sollte mehr als eine Grafik verwendet werden. Im Beispiel habe ich 4 verschiedene Blätter - mit ArtRage erstellt. Diese werden den "Schneeflockendiv" entsprechend zugeordnet.
Auszug aus snow.js bzw. blaetter.js
// [2012-01-25] Martina Major: z-Index + 10.000, wegen in der Homepage bereits verwendeten Ebenen
zi = i+10000;
// [2012-01-25] Martina Major: verschiedene Bilder - 4 - unterschiedliche Blaetter
var SNOW_Picture_s = "/demo/images/blatt_40x40";
var Image_Nr = i % 4;
var SNOW_Picture = SNOW_Picture_s+"_"+Image_Nr+".png";
if (i == 0) document.write("<\div id=\"SNOW_flake"+ i
+"\" style=\"position: absolute; z-index: "+ zi
+"; visibility: visible; top: 15px; left: 15px;\">
<a href=\"http://www.peters1.dk\" target=\"_blank\">
<\img src=\""
+SNOW_Picture
+"\" border=\"0\"></a><\/div>");
else document.write("<\div id=\"SNOW_flake"+ i
+"\" style=\"position: absolute; z-index: "+ zi
+"; visibility: visible; top: 15px; left: 15px;\">
<\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");
