JavaScripts -> Animation -> Hintergrund-Fader

Mit dem Background Fader kann man die Farbe des Hintergrundes sanft von einer Farbe in die andere übergehen lassen.

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<script type="text/javascript">
<!--
// = = ===================================================================== = =
// = = Background Fader v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ===================================================================== = =

// -----------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// -----------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// -----------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// -----------------------------------------------------------------------------

// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.

// Benutzung:
// ==========

// Fügen Sie z.B. in einen Link oder in einen Event-Handler (<body onLoad="...">) den Aufruf des Scriptes ein:
// bgfade(r,g,b);
// r,g und b sind die Rot- Grün- und Blauanteile der Farbe, zu der gefadet werden soll.

// Usage:
// ======

// Include the script call in a link or event handler (<body onLoad="...">):
// bgfade(r,g,b);
// r,g and b are the red, green and blue parts of the color to be faded to.

// Veränderbare Einstellungen / Adjustable Settings
// ================================================

var steps=32; // In wievielen Schritten soll gefadet werden? / Fade using how many steps?
var delay=100; // Wie lang soll die Verzögerung zwischen den Schritten sein? / How much delay between the steps?

// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var to=0;
var sr,sg,sb;
var step;
var tr,tg,tb;

function bgfade(r,g,b) {
  if(to)window.clearTimeout(to);
  var col=document.getElementsByTagName("body")[0].style.backgroundColor;
  var p;
  if(col.substr(0,1)=='#') {
    sr=parseInt(col.substr(1,2),16);
    sg=parseInt(col.substr(3,2),16);
    sb=parseInt(col.substr(5,2),16);
  } else {
    sr=parseInt(col.substr(4,4));
    for(p=4;p++;p<col.length) if(col.substr(p,1)==',')break;
    p++;
    sg=parseInt(col.substr(p,4));
    for(;p++;p<col.length) if(col.substr(p,1)==',')break;
    p++;
    sb=parseInt(col.substr(p,4));
  }
  tr=r;
  tg=g;
  tb=b;
  step=0;
  fadeit();
}

function fadeit() {
  to=0;
  var r,g,b,rgb;
  step++;
  r=sr + parseInt((step* (tr-sr))/steps);
  g=sg + parseInt((step* (tg-sg))/steps);
  b=sb + parseInt((step* (tb-sb))/steps);
  rgb="#";
  if(r<16)rgb+="0";
  rgb+=r.toString(16);
  if(g<16)rgb+="0";
  rgb+=g.toString(16);
  if(b<16)rgb+="0";
  rgb+=b.toString(16);
  document.getElementsByTagName("body")[0].style.backgroundColor=rgb;
  if(step<steps)to=window.setTimeout("fadeit()",delay);
}

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Background Fader --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 08.Mar.2004 --
// ----------------------------


//-->
</script>