BG Color Fade

A

Alaniak

Erfahrenes Mitglied
Hi Leute,

nachdem ich weder hier im Forum noch bei Google was entprechendes gefunden hab wende ich mich jetzt mal direkt an euch.

Eigentlich ist es ein recht simples Problem (denk ich mal). Und zwar will ich nur, dass die BG-Color sich in bestimmten Zeitabständen ändert. Also beispielsweise von #123456 nach 2 Sekunden auf #342516 wieder nach 2 Sekunden auf #514263 und so weiter und wieder von vorne.

Ein einfacher Fade von Schwarz auf weiß hab ich mittels RGB-Werten schon hinbekommen, aber den Fade bei mehreren Hex-Werten weiß ich nicht wie ich das anstellen soll. Theoretisch würde auch der Fade zwischen verschiedenen CSS-Divs gehen, allerdings wäre das ziemlich "unelegant".

Würd mich freuen, wenn jemand ne Lösung oder ein Beispiel weiß.
 
Also das Prinzip scheinst du ja schon zu haben, wenn nen fade von schwarz auf weiß klappt...
Du musst nur irgendiwe festlegen, welche RGB-Werte benutzt werden und in welcher Reihenfolge...

Und dementsprechend den Code etwas erweitern, sodass du ne Schleife hast, die dann jedesmal nen anderen RGB-Wert wählt...
 
Wenns ein Fade sein soll, nimmst Du

A. Dein Array an zu erreichenden Farben
zB
[0] #000000
[1] #FF0000
[2] #00FF00
[3] #00FFFF
[4] #FFFFFF

2. Dann brauchst Du einen Timer , ich glaube SetIntervall, der für die Zeit zwischen den Fades zuständig ist, also zB Intervall alle 5 Sekunden

3. Am Besten noch einen Timer für die lineare Werteänderung der BG-Color. Dort per Whileschleife zB in 255 Schritten von einem Wert zum Anderen. Beachte, dass Du die Komponenten einzeln berechnen musst.

Also:
Code: 
while(Zaehler<255) {
R_Moment = R_Anfang+(R_Ende-R_Anfang)*Zaehler/255;
G_Moment = G_Anfang+(G_Ende-G_Anfang)*Zaehler/255;
B_Moment = B_Anfang+(B_Ende-B_Anfang)*Zaehler/255;
Zaehler++;
}

Ich bin kein JS-Guru, aber grob sollte es so funktionieren :D

mfg chmee
 
Zuletzt bearbeitet:
Nun, ich fand die Fragestellung so interessant, dass ich mich gestern rangesetzt habe:

HTML: 
<html><head><title>phreekz BGTest</title>
</head><body>
<script type="text/javascript">
var aktiv = window.setInterval("Farbe()", 2000);
var i = 0 ;
var farbe = new Array();
var vonR,vonG,vonB,nachR,nachG,nachB ;
var momentR,momentG,momentB;
var colorFertig;
// Array mit erster und letzter Farbe gleich
farbe[0]="#FFFFFF";
farbe[1]="#FF0033";
farbe[2]="#3300FF";
farbe[3]="#FFAA00";
farbe[4]="#559AFF";
farbe[5]="#999999";
farbe[6]="#FFFFFF";

var cols = farbe.length-1;
document.write(cols+" Farben");
function Farbe () {
 if(i<cols){
// HexAnteil aus farbe extrahieren und in Dezimal umwandeln
  vonR = HexToR(farbe[i]);
  vonG = HexToG(farbe[i]);
  vonB = HexToB(farbe[i]);

  nachR = HexToR(farbe[i+1]);
  nachG = HexToG(farbe[i+1]);
  nachB = HexToB(farbe[i+1]);
  
  changeColor(vonR,vonG,vonB,nachR,nachG,nachB);
  i++;
  } else 
  {i=0;}
}
function changeColor(R1,G1,B1,R2,G2,B2){
  for(var a=0;a<255;a++){
   momentR=parseInt(R1+(R2-R1)/255*a);
   momentG=parseInt(G1+(G2-G1)/255*a);
   momentB=parseInt(B1+(B2-B1)/255*a);
//  Eigentlich gibt es .toString(16) funktioniert aber nicht wie erwartet
   colorFertig="#"+decToHex(momentR)+decToHex(momentG)+decToHex(momentB);
   document.bgColor = colorFertig;
  }

}
function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

function toHexa(decimal) {
 switch(decimal) {
   case 10:
     return "A";
   case 11:
     return "B";
   case 12:
     return "C";
   case 13:
     return "D";
   case 14:
     return "E";
   case 15:
     return "F";
   default:
     decimal = "" + decimal;
  }
  return decimal;
}
function decToHex(num) {
  return(toHexa(Math.floor(num / 16)) + toHexa(num % 16));
}
</script>
</body></html>
Die Farbänderung wird eingeleitet mit SetInterval(), dann wird eine einfache Funktion aufgerufen, die eine Schleife durchgeht und den maximalen Bereich durchstept (255). Das Besondere ist die Umwandlung von #RRGGBB nach intR,intG,intB und nach Berechnung wieder zurück nach #RRGGBB, da bei mathematischen Funtkionen nicht darauf geachtet wird ob die Stellen einghalten werden, sprich, es wird für die Ausgabe unbedingt ein zweistelliger Betrag benötigt, aber die Berechnung wirft zB nur ein 0 raus, also zweite Stelle dazuschummeln.

Noch dazu ist die Umwandlung von Dezimal nach Hex über .toString(16) sicherlich schneller, macht aber genau solche Fehler und ich habe diese Oldschool-Methode genommen, die aber auch die Stelligkeit garantiert.

Kurzum, es funktioniert. Aber ich würde mich freuen, wenn ein JSler da rüber schaut und Verbesserungswege aufzeigt.

mfg chmee

**EDIT** Habe es gerade auf nem schnelleren Rechner getestet : Unter IE sieht man die Fades unter FF "scheint" er einfach umzuschalten. Also vielleicht doch das Fading über einen weiteren setInterval() starten, dann hat man eine zeitliche Kontrolle. Jetzt hier zu finden
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück