Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Colorfading

Schwierigkeit: für Fortgeschrittene

 


3 kbyte

Skript und Beispiele downloaden

Colorfading ausprobieren (Hintergrund)
Colorfading ausprobieren (Text)

Beschreibung:

Mit diesem Skript ist es möglich Texte, Hintergründe oder ganze Dokumente in Regenbogenfarben zu erzeugen. Um dieses Skript auszuführen, muss ihr Browser JavaScript 1.3 unterstützen und mit CSS 2.0 umgehen können.

Beispiel:

Man muss sterben weil man sie kennt.
Sterben an der unsäglichen Blüte des Lächelns.
Sterben an ihren leichten Händen.
Sterben - an den Frauen.
[Rainer Maria Rilke]
 

Quellcode

Hier ein kleiner Einblick in den Quelltext.

JavaScript:

<SCRIPT language="JavaScript">
<!-- Autor: www.All-Community.de
// Hinweis auf Autor nicht entfernen!

// Hilfsvariablen
var timer;
var coloredArea;

// Colorfading:
// typ   = gibt an, ob Text oder
//         Hintergrund verändert werden soll
// a     = Farben werden wenn a>0 heller;
//         wenn a<0 dunkler
// r,g,b = Starteinstellung für RGB-Farbwerte

function colorfade(typ, a, r, g, b) {

 // Die Farbwerte (r=rot, g=grün, b=blau) berechnen
r += Math.ceil(Math.random()*3)*a;
g += Math.ceil(Math.random()*3)*a;
b += Math.ceil(Math.random()*3)*a;
 
 // Farbwerte übertragen
if (typ == "color") {
 coloredArea.color="rgb("+r+","+g+","+b+")";
} else if (typ == "background") {
 coloredArea.backgroundColor="rgb("+r+","+g+","+b+")";
};
 
 // die Funktion 100ms später erneut aufrufen
if (r<220 && g<220 && b<220 && r>30 && g>30 && b>30) {
 // Farbwerte sind im "Normalbereich"
 timer=setTimeout("colorfade('"+typ+"',"+a+","+r+","+g+","+b+")",100);
} else {
 // Skala wird überschritten, also Vorzeichen ändern
 timer=setTimeout("colorfade('"+typ+"',"+(-a)+","+r+","+g+","+b+")",100);
};

};

// Ende des Skripts -->
</SCRIPT>

Start:

Das war es noch nicht ganz. Es fehlt noch der Aufruf für das Skript. Hier gibt es Unterschiede abhängig davon, wofür sie das Skript verwenden wollen (siehe Beispiele). Um beispielsweise die Hintergrundfarbe des "body"-Tags (also den Hintergrund des aktuellen Dokuments) zu ändern, verwenden sie folgenden Quellcode.

<SCRIPT language="JavaScript">
coloredArea = document.body.style;
colorfade('background', 1, 100,100,100)
</SCRIPT>

Sollten sie einen anderen Tag im Auge haben, tragen sie einfach statt "body" den Namen des gewünschten Tags ein. Zum Beispiel:

<P NAME="Regenbogen">Das ist ein Test!</P>
 
<SCRIPT language="JavaScript">
coloredArea = document.Regenbogen.style;
colorfade('background', 1, 100,100,100)
</SCRIPT>

Falls nicht der Hintergrund (eng. "background") sondern die Textfarbe geändert werden soll, ersetzen sie in diesem Aufruf den Text "background" durch "color".

Weitere Beispiele finden sie im Skriptpaket, dass sie hier downloaden können.
 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: