Backgroundcolor im loop überblenden

[green3]

Ich habe viele viele viele Berichte aus Google gesucht und gefunden, doch das ist alles nicht das was ich suche.

Ich möchte die Hintergrundfarbe endlos in 3 Farben gaaaaaanz laaaaangsam und ohne verzögerungen überblenden. Dabei sollte ich möglichst mit einer kleinen Zeile die Farben definieren können in denen die Überblendung stattfinden soll.

Bitte idiotensicher. :)

[henman]

hallo,

Ich habe viele viele viele Berichte aus Google gesucht und gefunden, doch das ist alles nicht das was ich suche.

wonach haste denn gesucht?

Ich möchte die Hintergrundfarbe endlos in 3 Farben gaaaaaanz laaaaangsam und ohne verzögerungen überblenden. Dabei sollte ich möglichst mit einer kleinen Zeile die Farben definieren können in denen die Überblendung stattfinden soll.

haste denn schon ein klitzekleines bisschen selbst hinbekommen?

Bitte idiotensicher. :)

dann bitte mit Überweisung bezahlen :P

grüße,
henman

[henman]

hallo,

Ich möchte die Hintergrundfarbe endlos in 3 Farben gaaaaaanz laaaaangsam und ohne verzögerungen überblenden. Dabei sollte ich möglichst mit einer kleinen Zeile die Farben definieren können in denen die Überblendung stattfinden soll.

haste denn schon ein klitzekleines bisschen selbst hinbekommen?

so schwer ist es ja nicht. Du willst die Hintergrundfarbe wechseln. Dazu musst du <http://de.selfhtml.org/javascript/objekte/document.htm#bg_color@title= Zugriff auf das Element body bzw. die Hintergrundfarbe> bekommen.
Die Farbe soll sich in einem http://de.selfhtml.org/javascript/objekte/window.htm#set_interval@title=Interval ändern.
Damit du es leicht ändern kannst, schreibst du die Farben in Variablen oder in ein Array.

Die Vorgehensweise ist also folgende:

• in ein Array gewünschte Farben eintragen
• beim Laden der Seite wird ein Interval gestartet, welches ..
• .. die Funktion aufruft, die die Farbe ändert.
• die Funktion greift sich dann aus dem Array eine Farbe und setzt sie über den oben erwähnten Zugriff ein. Das Wechselmuster könnte ein Zufallsprinzip sein oder immer der Reihe nach oder noch anders. Wie du halt willst.

grüße,
henman

[suit]

• .. die Funktion aufruft, die die Farbe ändert.

Das ist einer der "komplizierteren" Teile da zwischen den beiden Farbwerten die zwischenschritte berechent werden, weils ja eine laaaaangsame[sic!] Überblendung sein soll ;)

[Der Martin]

Hallo,

• .. die Funktion aufruft, die die Farbe ändert.
  Das ist einer der "komplizierteren" Teile da zwischen den beiden Farbwerten die zwischenschritte berechent werden, weils ja eine laaaaangsame[sic!] Überblendung sein soll ;)

könnte man die Funktion nicht einfach ganz laaaaangsam aufrufen? ;-)

So long,
 Martin

[Don P]

Hallo,

könnte man die Funktion nicht einfach ganz laaaaangsam aufrufen? ;-)

Darüber könnte man nachdenken... wenn es nicht noch die zusätzliche Anforderung

und ohne verzögerungen

gäbe... ;)

*ROFL*
Don P

[green3]

Au ja, Zufallsprinzip im Tempo und Farbe das wäre es.
uiiii.

Wenn ich dann noch den Farbraum bestimmen könnte das wäre es. Ja, dann wäre die Welt ein bisschen bunter.

[green3]

Na gut, soOo idiotensicher muss es ja auch nicht sein *grin

Anhand von
http://plugins.jquery.com/project/color

Habe ich mich gerade mal versucht an
http://www.goletzko.design.tl/fadeeffect/fade2.htm

Da kam ich jedoch nicht besonders weit wie man merkt.

Einfacher fand ich
http://www.goletzko.design.tl/fadeeffect/fade1.htm
ich kriege aber kein pingpong loop hin.

[suit]

http://plugins.jquery.com/project/color

3,5 KiB?

Mit 5 KiB bekommst du schon den jQuery-UI-Core plus den Effects-Core - und das ist nicht 3 Jahre alt und verwaist ;)

[Green3]

Ich habe den anderen Weg aufgegeben. Ich weiß nicht was ein Increment oder Array ist. Und meine Vorstellung habe ich mehr oder weniger übermittelt. Das Ergebnis ist mit jQuery sehr zufriedenstellend und funktioniert auf den gängigen Browsern.
http://www.goletzko.design.tl/fadeeffect/jqueryfade3.htm
Blöd ist nur dass ich nicht weiß wie man es loopt.

[Green3]

Ok. Jetzt weiß ich es.
Hier das Beispiel
und hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
  
  <script>  
  $(document).ready(function foo(){  
  $(".block")  
	.animate( { backgroundColor: 'pink' }, 1000)  
    .animate( { backgroundColor: 'blue' }, 1000)  
	    .animate( { backgroundColor: 'black', }, {duration:1000, complete:foo});  
  });  
  </script>  
  <style>.block {  
   background-color: blue;  
   width: 2000px;  
   height: 1000px;  
   margin: 0px;  
}</style>  
</head>  
<body>  
<script src="http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js"></script>  
<div class="block"></div>  
  
</body>  
</html>  

Ich würde am liebsten diesen ganzen Thread entmüllen. Hat lange gedauert. Habe es selbst gemacht und eigentlich nicht viel dazugelernt.

[ChrisB]

Hi,

Ich würde am liebsten diesen ganzen Thread entmüllen. Hat lange gedauert. Habe es selbst gemacht und eigentlich nicht viel dazugelernt.

Das kannst du ja auch nicht unbedingt erwarten, wenn du dir ein fertiges Plugin für irgendein Framework nimmst, und dieses dann nur noch aufrufst.

Ob du hier was lernst, liegt zum größten Teil und in erster Linie an/bei dir.
Hinweise, was zu tun ist und wie, welches Basics bekannt sein müssen, hast du einige bekommen.
Wenn dein Lern-Wille, also dein Wille, dich selber damit zu beschäftigen, selber Dinge auszuprobieren, dir fehlendes (Grundlagen-)Wissen anzulesen, zu dem Zeitpunkt abstirbt, wo du was Fertiges gefunden hast, das „funzt“ ... dann ist absehbar, dass du nicht wirklich viel dazu lernst im Verlaufe einer solchen Sache.

MfG ChrisB

[Green3]

Hi ChrisB,

jeder Pädagoge wird dir bestätigen können das das Erfolgserlebnis ein sehr prägender Moment ist. Jedoch eine permanente Frustration verbunden mit halbherzigen Hilfestellungen keinen Schüler vorantreiben. Nein, tut mir leid. Javascript ist eine unglaublich zickige Scriptsprache und es genügt eine falsch gesetzte Klammer und das Ding steht. Das ist noch nicht einmal das Problem. Lernunterlagen wären von Vorteil. Hier und da mal ein Link auf ein Tutorial das das Lernen erleichtern würde. Oder möchtest du mir damit sagen das die Anweisungen die ich hier bekommen habe einem Tutorial entsprechen? Nein, ich bin dabei grundsätzlich zu lernen und habe auch viel gelernt aber das habe ich nicht diesem Redeschwall zu verdanken der hier in diesem Thread entstanden ist. Wenn ich jemandem die Kunst des Origami beibringen soll und derjenige kennt nur das Blatt, genügt es nicht zu sagen "du musst so lange Falten bis ein Kranich entsteht".

PS. "Der Betreff enthält nur kleine Buchstaben (-1.00 Punkte). Sind Sie sicher, dass Sie das Posting so abschicken wollen? Der Text enthält weniger als oder genau zwei Zeilenumbrüche (-3.00 Punkte). Sind Sie sicher, dass Sie das Posting so abschicken wollen?" Wenn man den Inhalt eines Textes davon abhängig macht wie viele Umbrüche und Großschreibung er enthält, erklärt es auch die Ausführungen hier im Forum.
OMFG
WTF

[Der Martin]

Hallo,

jeder Pädagoge wird dir bestätigen können das das Erfolgserlebnis ein sehr prägender Moment ist.

zweifellos, das empfinde ich auch so.

Javascript ist eine unglaublich zickige Scriptsprache

Oh nein, im Gegenteil: Javascript ist unglaublich großzügig und nachsichtig.

und es genügt eine falsch gesetzte Klammer und das Ding steht.

Naja, die Syntax sollte wenigstens stimmen, das ist eine Minimalforderung.

Lernunterlagen wären von Vorteil. Hier und da mal ein Link auf ein Tutorial das das Lernen erleichtern würde. Oder möchtest du mir damit sagen das die Anweisungen die ich hier bekommen habe einem Tutorial entsprechen?

Nein. Das ist aber auch nicht der Anspruch eines Forums, auf dessen Startseite zu lesens ist: "Von dir als Teilnehmer erwarten wir HTML-Grundkenntnisse, sowie die Bereitschaft, zunächst erst einmal mit der  Suchfunktion im Archiv nach ähnlichen Problemen zu suchen."
Gut, da steht ausdrücklich HTML, weil das sicher das Kernthema des Forums ist. Der Satz gilt aber im übertragenen Sinn auch für CSS, Javascript, PHP, oder irgendeine andere Technik, die hier mehr oder weniger stark vertreten ist. Wir sind gern bereit, auch Anfängern zu helfen, aber die Initiative muss vom Anfänger selbst ausgehen.

Wenn ich jemandem die Kunst des Origami beibringen soll und derjenige kennt nur das Blatt, genügt es nicht zu sagen "du musst so lange Falten bis ein Kranich entsteht".

Nein, aber man würde dir ein Blatt Papier in die Hand geben und sagen: Lass deiner Kreativität ihren Lauf, versuch es wieder und wieder.
Das Beispiel ist nicht schlecht, es hinkt ein bisschen, aber nicht viel. Es hinkt nur insofern, als Origami wirklich fast nur auf Kreativität zurückgeht; das einfache "Nachbauen" bekannter Figuren ist nicht der eigentliche Sinn. Regeln gibt es kaum, wogegen Programmiersprachen sehr klaren, mehr oder weniger starren Regeln folgen.

PS. "Der Betreff enthält nur kleine Buchstaben (-1.00 Punkte). Sind Sie sicher, dass Sie das Posting so abschicken wollen? Der Text enthält weniger als oder genau zwei Zeilenumbrüche (-3.00 Punkte). Sind Sie sicher, dass Sie das Posting so abschicken wollen?" Wenn man den Inhalt eines Textes davon abhängig macht wie viele Umbrüche und Großschreibung er enthält, erklärt es auch die Ausführungen hier im Forum.

Ja. Man sollte sich schon ein wenig bemühen, sein Anliegen auch in einigermaßen klaren Sätzen zu formulieren. Dazu gehört auch der korrekte Gebrauch von Groß- und Kleinschreibung, oder wenigstens ansatzweise eine Gliederung des Beitrags, indem man zumindest hier und da einen Absatz macht.

Ciao,
 Martin

[ChrisB]

Hi,

jeder Pädagoge wird dir bestätigen können das das Erfolgserlebnis ein sehr prägender Moment ist. Jedoch eine permanente Frustration verbunden mit halbherzigen Hilfestellungen keinen Schüler vorantreiben.

Wenn du bei solchen Themen zu schnell aufgibst, dann ist das vielleicht nichts für dich. Ist keine Schande.

Nein, tut mir leid. Javascript ist eine unglaublich zickige Scriptsprache und es genügt eine falsch gesetzte Klammer und das Ding steht.

JavaScript ist nicht zickig, und die korrekte Syntax musst du in jeder Programmiersprache einhalten.

Lernunterlagen wären von Vorteil. Hier und da mal ein Link auf ein Tutorial das das Lernen erleichtern würde. Oder möchtest du mir damit sagen das die Anweisungen die ich hier bekommen habe einem Tutorial entsprechen?

Nein.
Hast du nach einem Tutorial gefragt?
Hast du mal selbst nach einem gesucht?

Nein, ich bin dabei grundsätzlich zu lernen und habe auch viel gelernt aber das habe ich nicht diesem Redeschwall zu verdanken der hier in diesem Thread entstanden ist. Wenn ich jemandem die Kunst des Origami beibringen soll und derjenige kennt nur das Blatt, genügt es nicht zu sagen "du musst so lange Falten bis ein Kranich entsteht".

Für jemanden, der noch kein Blatt einmal sauber in der Mitte falten kann, ist Origami vielleicht auch noch etwas zu hoch.
Vielleicht übernimmst du dich ebenfalls mit den Aufgaben, die du dir in Punkto JavaScript stellst.

MfG ChrisB

[ChrisB]

Hi,

Hast du nach einem Tutorial gefragt?
Hast du mal selbst nach einem gesucht?

Solltest du dich näher mit den Grundlagen von JavaScript beschäftigen wollen, dann schau doch mal bei den SELFHTML Aktuell Artikeln vorbei.

Bspw. Organisation von JavaScripten und Objekt-Handling in JavaScript vermitteln wertvolles Grundlagenwissen über den Umgang mit der Sprache.

MfG ChrisB

[JürgenB]

Hallo green3,

Einfacher fand ich
http://www.goletzko.design.tl/fadeeffect/fade1.htm
ich kriege aber kein pingpong loop hin.

if( red == redE ) { }  
else {  
  red++; }

solange red kleiner redE ist, wird es jedes mal um eins erhöht, wenn es bei redE angekommen ist, passiert nichts. Dein Algorithmus fährt einfach von Schwarz über grau nach Weiß.

if( red == redE ) {  
  red=0;}  
else {  
  red++; }

so springst du von Weiß nach schwarz.

Bevor ich jetzt aber anfange, zig Vorschläge zu machen, wie du die Farbe noch anders "loopen" kannst, solltest du mal sagen, was du überhaupt willst, bzw. über welche Töne die Farben "loopen" sollen.

Gruß, Jürgen

[green3]

http://www.goletzko.design.tl/fadeeffect/fade3.htm
Tut nich? O.o

Die idee ist: Wenn du bei einem leicht bewölkten Himmel ein Blatt auf den Boden legst verdunkelt sich der Himmel leicht und für kurze Zeit. Des weiteren wechseln die Farben von leichtem Orange über Rottöne auf ein helles blau bis hin zu blaugrün. Unser Auge nimmt es zwar wahr doch unser Gehirn gleicht dies aus. Je nach Uhrzeit wird diese Kombination immer orangefarbener bis hin zu Rottönen und am Ende fast schwarz. Damit das ganze funktioniert wird die Uhrzeit vom Server abgefragt und per PHP der entsprechende Farbraum in den Script eingefügt.

[JürgenB]

Hallo green3,

http://www.goletzko.design.tl/fadeeffect/fade3.htm
Tut nich? O.o

diese Zeilen

if( blue == blueE && red == redE && green == greenE ) {}
else {
 setTimeout("wechsel()", 10); }

führen dazu, dass das Script abbricht. Lass mal das if-else weg und führe nur den setTimeout aus.

Aber viel wichtiger ist, dass du dir überlegst, in welcher Folge die R-, G- und B-Werte geändert werden sollen. Dazu benötigst du für jede Farbe den Start- und den Endwert sowie die Zahl der Schritte, die durchlaufen werden sollen. Daraus kanst du dann das Increment für jede Farbe berechnen:

dRot   = (RotE   - RotS)  /nSchritte;
  dGruen = (GruenE - GruenS)/nSchritte;
  dBlau  = (BlausE - BlauS) /nSchritte;

Rot = RotS;
    ...

und in der Timerfunktion dann:

Rot += dRot;
    ...

dann musst du noch runden:

r = Math.round(Rot);
    ...

Die Timerfunktion ruft sich dann so oft auf, bis die gewünschte Zahl der Schritte abgearbeitet ist, bzw. setzt die Farben wieder auf den Startwert oder dreht die Incremkente um oder ... .

Gruß, Jürgen

[Green3]

Shit... ich habe keine Ahnung wie ich das machen soll... ich kann Scripte ändern aber nicht aufbauen.

[JürgenB]

Hallo Green3,

Shit... ich habe keine Ahnung wie ich das machen soll... ich kann Scripte ändern aber nicht aufbauen.

du musst ja auch erst mal keine Scripte erstellen, sondern dir überlegen, wie du die Farben verändern willst. Den Rest hast du schon fast.

Gruß, Jürgen

[Green3]

Ok... habe es hingekriegt.
http://www.goletzko.design.tl/fadeeffect/fade4.htm
Naja den Loop. Aber das andere verstehe ich nicht wie ich das einbinden kann.

[at]

Hallo.

Aber viel wichtiger ist, dass du dir überlegst, in welcher Folge die R-, G- und B-Werte geändert werden sollen.

Noch viel wichtiger ist, den IE zu verfluchen, weil sein Marktanteil von der Verwendung des HSL-Farbmodells abhält, mit dem deine Überlegung entfiele.
MfG, at

[green3]

So oder so ähnlich...
http://buildinternet.com/2009/09/its-a-rainbow-color-changing-text-and-backgrounds/
Leider funktioniert das nicht im IE