Doku - Major-Online - fallende Blätter oder Pfoten auf der Homepage

fallende Blätter oder Pfoten auf der Homepage

Drucken

Kategorie: JavaScript

Erstellt: Mittwoch, 25. Januar 2012 16:35

Zuletzt aktualisiert: Donnerstag, 17. März 2016 18:29

Geschrieben von Martina Major

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

Katzenpfote gezeichnet mit Stift am Touchscreen in Gimp

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.

Katzenpfote 40x40

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>");

Schlagwörter:
JavaScript
Blätter
Pfoten