Kurzbeschreibung Die Farbe des Hintergrundes ändert sich kontinuierlich.
Vorteile Fällt auf. Wird relativ selten verwendet. Kurze Ladezeit. Wenig Speicherbedarf. Keine externen Dateien (wie z.B. Bilder) notwendig. Kann in nahezu beliebigen Elementen verwendet werden.
Nachteile Funktioniert nur, wenn der Browser JavaScript ausführen kann. Kann die Lesbarkeit zeitweise erheblich beeinträchtigen.
Schwierigkeit Wer schon erfolgreich HTML-Seiten geschrieben hat, wird mit dieser Anleitung auch diesen Hintergrund hinkriegen. Wer noch gar keine Erfahrungen mit HTML gemacht hat, wahrscheinlich auch.

Der besondere Hintergrund

Es gibt viele Möglichkeiten, den Hintergrund eines HTML-Elements zu gestalten. Eine sehr Aufmerksamkeit erregende wird auf dieser Seite beschrieben.

Anleitung

Zuerst schreibst du eine ganz normale HTML-Seite - mit dem Text, den Bildern, Tabellen… - was eben auf die Seite soll.

Jetzt kommt etwas, was dem HTML-Laien erst erklärt werden muss: HTML-Code besteht aus Text und sogenannten Tags (Einzahl ist Tag. Mehrzahl ist trotzdem nicht Tage *g*). Wozu der Text da ist, ist wohl klar. Das ist der Text, der nachher auch im Dokument zu lesen ist. Die Tags sind so was wie Steuerbefehle. Alle Tags stehen in diesen spitzen Klammern: <>.

Das Tag <table> bedeutet zum Beispiel: Hier fängt eine Tabelle an. Logischerweise muss dann irgendwann das Tag </table> kommen. Das bedeutet nämlich: Hier hört eine Tabelle auf. Kommt das Tag </table> ohne dass vorher ein <table>-tag war, ist das ein Fehler und die Seite wird nicht richtig dargestellt. Fast alle Tags haben also ein Anfangstag und ein Endtag. Beim Anfangstag stehen meistens noch Anweisungen dabei, wie das jeweilige Element auszusehen hat. <table border="1" cellpadding="10" cellspacing=0 width="100%"> ist so ein Tabellenanfang, bei dem noch solche Anweisungen stehen. Die sind im Moment aber unwichtig. Das jeweilige Endtag sieht so wie das Anfangstag aus, nur ohne die zusätzlichen Anweisungen, aber mit einem / nach der <. Also hört auch diese Tabelle mit </table> auf.

Für fast jedes dieser Elemente kann man eine Hintergrundfarbe festlegen. Ich habe "den besonderen Hintergrund" für zwei Tabellenzellen und die Überschrift genommen. Aber das würde genau so gut z.B. mit einem Textabsatz, einer Tabellenzeile oder der ganzen Seite funktionieren. Ich empfehle, "den besonderen Hintergrund" nicht zu großfächig ein zu setzen

ganze Seite<body>
Testabsatz<p>
Hauptüberschrift<h1>
Überschrift 2. Ordnung<h2>
Tabelle<table>
Tabellenzeile<tr>
Tabellenzelle<td>
Tabellen-Überschrift-Zelle<th>
Bereich (Block)<div>
Bereich (inline)<span>

Der Einbau

Am besten baust du den "den besonderen Hintergrund" erst mal nur in ein Element ein. Wenn du entschieden hast, in welchem Element du "den besonderen Hintergrund" einsetzen willst, musst du dieses Element in deinem Quellcode finden. Rechts siehst du eine Übersicht über einige häufig verwendete Elemente mit ihren Anfangstags. Ich erkläre es am Beispiel der Überschrift dieser Seite. Im Quellcode würde da ohne "den besonderen Hintergrund" <h1>Der besondere Hintergrund</h1> stehen. Das Anfangstag muss um  id="fade1" zu <h1 id="fade1"> erweitert werden.

Damit verändert sich das Aussehen der Seite noch nicht. Damit haben wir nur festgelegt, auf welches Element sich das Script, das jetzt eingebaut wird, auswirkt. Als nächstes musst du in den Head deiner Seite den Quellcode einfügen, den du unten im weißen Kasten sehen kannst. Eine Html-Seite besteht im Wesentlichen aus einem großen Element, das mit <html> beginnt und mit </html> endet. Das Anfangstag kann, wie schon erwähnt, weitere Angaben enthalten. Es könnte z.B. <html lang="de"> lauten. Darin sind normalerweise 2 Elemente, der Head und der Body. In denen sind jeweils weitere Elemente, aber das ist jetzt nicht relevant. Der Head beginnt mit <head> und endet mit </head>, der Body beginnt mit <body> und endet mit </body>. Natürlich können auch da die Anfangstags weitere Angaben enthalten. Es gibt keine Vorschrift, an welche Stelle das Script im Head muss, aber es gibt Stellen, an die es nicht darf. Um sicher zu gehen, dass du es nicht an so eine verbotene Stelle baust, empfehle ich dir, es unmittelbar vor </head> ein zu bauen. </head> steht üblicherweise in einer eigenen Zeile und das soll auch so bleiben. Du kannst vor un nach dem Script auch eine Leerzeile eifügen, wenn du das für übersichtlicher hältst. Kopiere also am besten den ganzen Text aus der Box unverändert an die beschrieben Stelle im Quellcode. Teste dann die Seite im Browser. Das Feintunig fehlt nach, aber funktionieren sollte das Script jetzt.

    <script type="text/javascript">
    <!--
      function Farbwechsel(r,g,b,Schritte) {
        this.r=r;
        this.g=g;
        this.b=b;
        this.Schritte=Schritte;
      };

      var z=new Array();
      z[0] =new Farbwechsel(255,255,255,50);
      z[1] =new Farbwechsel(0,255,255,100);
      z[2] =new Farbwechsel(255,0,255,100);
      z[3] =new Farbwechsel(0,0,255,100);
      z[4] =new Farbwechsel(0,255,0,100);
      z[5] =new Farbwechsel(255,0,0,100);
      z[6] =new Farbwechsel(0,0,0,100);

      var r1 = 255;
      var g1 = 204;
      var b1 = 102;

      var j=0;
      var restschritte=z[0].Schritte;
      var intervallId;
      var r3 = r1;
      var g3 = g1;
      var b3 = b1;

      function StringArray(n) {
        this.length - n;
        for (var i =1; i <= n; i++) {
          this [i] = ' ';
        };
      };

      var fader = new StringArray (16);
      for (var i = 0; i < 10; i++) {
        fader[i] = i;
      };
      fader[10] = "a";
      fader[11] = "b";
      fader[12] = "c";
      fader[13] = "d";
      fader[14] = "e";
      fader[15] = "f";

      function hexadecimal(i) {
        return ("" + fader[Math.floor(i/16)] + fader[i%16]);
      };

      function startAni() {
        intervallId = setInterval(fade, 100);
      };

      function fade() {
        if(j<z.length) {
          if(restschritte > 0) {
            r3 = Math.round((z[j].r - r3) / restschritte)+r3;
            var rhex = hexadecimal (r3);
            g3 = Math.round((z[j].g-g3)/restschritte)+g3;
            var ghex = hexadecimal (g3);
            b3 = Math.round((z[j].b-b3)/restschritte)+b3;
            var bhex = hexadecimal (b3);
            restschritte--;
            document.getElementById("fade1").style.backgroundColor = "#" + rhex + ghex + bhex;
          } else {
            r1 = r3;
            g1 = g3;
            b1 = b3;
            j++;
            j=j%z.length;
            if(j<=z.length) restschritte = z[j].Schritte;
          };
        } else clearInterval(intervallId);
      };
    window.onload = startAni();
    //-->
    </script>

Die Leerstellen an den Zeilenanfängen haben übrigens keine Bedeutung. Sie werden vom Browser ignoriert und dienen nur der Übersichtlichkeit.

Die Anpassungen

In dem Script im weißen Kasten oben, sind einige Stellen in roter Schrift. Nur an diesen Stellen solltest du etwas verändern. (Natürlich kannst du verändern was du willst, aber an diesen Stellen habe ich vorgesehen, dass du etwas anpasst.) Diese Stellen werde ich jetzt Beschreiben.

var r1 = 255; var g1 = 204; var b1 = 102;

Hier wird die Farbe festgelegt, den der Hintergrund haben soll, wenn die Animation anfängt. Ich habe da die Farbe eingestellt, die auch die Hintergrundfarbe der restlichen Seite ist. In Html und CSS werden Farben normalerweise durch ein # und 6 Hexadezimalziffern beschrieben. Eigentlich sind das nicht 6 Hexadezimalziffern, sondern 3 zweistellige Hexadezimalzahlen. Mit einer zweistelligen Hexadezimalzahl kann man die Dezimalzahlen von 0 bis 255 darstellen. Die erste der 3 zweistelligen Hexadezimalzahlen gibt an, wie viel Rot die Farbe enthält. Die zweite gibt an, wie viel Grün sie enthält, und die dritte gibt an, wie viel Blau sie enthält. Ein helles Rot ist also #ff0000. #880000 ist ein dunkleres Rot. #440000 ist ein noch dunkleres Rot. Alle Farben kann man aus rotem, grünen und blauem Licht mischen. Wenn alle Farben gleich stark sind, entsteht ein Grauton. Je höher die Zahlen sind, desto heller sind die Farben. #000000 ist Schwarz, #ffffff ist Weiß. Das ganze ist auch auf "Der hexadezimale Farbcode" beschrieben. Da gibt es auch ein Tool, mit dem man die Farbwerte ausprobieren kann.

Für unser Script brauchen wir die drei Zahlen aber nicht als Hexadezimalzahlen, sondern als Dezimalzahlen. Den Farbwert für Rot trägst du als Wert bei var r1 = ein, den für Grün bei var g1 = und den für Blau bei var b1 =. Da müssen dann also 3 ganze Zahlen zwischen 0 und 255 stehen.

Jetzt solltest du das ganze wieder testen.

intervallId = setInterval(fade, 100);

Die Animation entsteht durch eine schrittweise Veränderung. Die Geschwindigkeit kannst du beeinflussen, indem du festlegst, wie viele Schritte für einen Farbwechsel gemacht werden sollen, und indem du festlegst, wie lang die Zeit von einem Schritt zum nächsten ist. Hier wird die Zeit pro Schritt in Millisekunden festgelegt. Ich habe 100 Millisekunden bzw. 0,1 s festgelegt. Du kannst dir leichst ausrechnen, dass man einen Wechsel z.B. von Violett (#ff00ff) nach Weiß (#ffffff) mit 10000 Schritten zu je 1 Millisekunde genau so schnell machen kann, wie mit 2 Schritten zu je 5 Sekunden. Aber die Wirkung ist natürlich nicht die gleiche. Mit 2 Schritten wechselt die Farbe nach 5 Sekunden plötzlich von Violett nach Helllila (#ff88ff) und nach weiteren 5 Sekunden genau so plötzlich nach Weiß. Mit mehr Schritten wird die Animation flüssiger. Aber zum einen ist es gar nicht möglich, den Grünwert, denn nur der ändert sich bei dieser Animation, von 00 (dezimal 0) bis ff (dezimal 255) in 10000 ganzzahlige Schritte zu teilen weil es ja nur 256 mögliche Werte gibt, zum anderen kann der Rechner in einer Millisekunde den neuen Farbwert wahrscheinlich gar nicht berechnen. In jedem Fall wäre das eine enorme Belastung für den Rechner und den Browser. Viel mehr als 100 Schritte sind nicht sinnvoll, denn so kleine Veränderungen nimmt man nicht wahr. Du kannst ja mit der Zahl ein wenig experimentieren. Hier muss jedenfalls eine positive ganze Zahl stehen.

z[0] =new Farbwechsel(255,255,255,50); z[1] =new Farbwechsel(0,255,255,100); z[2] =new Farbwechsel(255,0,255,100); z[3] =new Farbwechsel(0,0,255,100); z[4] =new Farbwechsel(0,255,0,100); z[5] =new Farbwechsel(255,0,0,100); z[6] =new Farbwechsel(0,0,0,100);

Hier werden die Farbwechsel festgelegt. Im Beispiel habe ich 7 Farbwechsel. Jeder dieser Farbwechsel beginnt mit z[x] =new Farbwechsel, wobei das x durch eine fortlaufende Zahl, beginnend bei Null, ersetzt werden muss. Es ist wichtig, dass es keine Lücke gibt! Wenn eine Zahl doppelt verwendet wird, wird der erste der beiden Farbwechsel nicht ausgeführt. Die Zeilen müssen nicht in chronologischer Reihenfolge im Quellcode stehen.

Danach folgt eine Klammer, die 4 Zahlen enthält, die durch Kommas voneinander getrennt sind. Die ersten 3 Zahlen legen die Farbe fest, die am Ende des jeweiligen Wechsles erreicht werden soll. Die 4. Zahl legt fest, in wie vielen Schritten dieser Wechsel durchgeführt wird. Die so beschriebenen Farbwechsel werden der Reihe nach ausgeführt. Dann geht es wieder mit dem ersten Wechsel weiter.

Der Ausgangswert ist in meinem Beispiel also, wie oben beschrieben, rgb(255,204,102). Von dieser Farbe aus geht es in 50 Schritten zur Farbe rgb(255,255,255). Das ist Weiß. Dann geht es in weiteren 100 Schritten zur Farbe rgb(0,255,255). Das ist Cyan. Dann geht es in weiteren 100 Schritten zu rgb(255,0,255). Das ist Violett. Usw. Du kannst nach Belieben die Farben verändern, weitere Zeilem ergänzen, oder Zeilen löschen. Du musst nur darauf achten, dass es bei den Indexzahlen von z keine Lücken gibt und dass die Farbwerte ganze Zahlen zwischen 0 und 255 sind.

j=j%z.length;

Wenn du alles so gemacht hast, wie ich bisher beschrieben habe, werden die Farbwechsel der Reihe nach ausgeführt und dann beginnt es immer wieder von vorn. Du kannst aber auch einstellen, dass die Folge der Farbwechsel nur einmal durchlaufen wird. Dann bleibt die Farbe wie sie gerade ist. Dazu löschst du einfach diese Zeile.

Anmerkung

Ich habe oben geschrieben, dass außer der Html-Seite keine zusätzlichen Dateien nötig sind. Und entsprechend habe ich beschrieben, wie man das alles in die Html-Seite einbaut. Natürlich ist es sinnvoll, Html, CSS und Scripte zu trennen. Du findest sicher leicht eine Beschreibung, wie du das Script in eine js-Datei speichern kannst und dann in der Html refernzierst. Ich empfehle dir: Mach es! Aber das ist nicht Bestandteil dieser Anleitung. Ich habe normalerweise für jede Html-Datei auch eine CSS-Datei und eine js-Datei. Außerdem gibt es Stylesheets, Scriptdateien, die Seitenübergreifend verwende.

Viel Spaß beim Ausprobieren


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: