• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Background-Color faden

J

Johannes11

Neues Mitglied
Hallo zusammen.

Ich versuche gerade via Javascript die Hintergrundfarbe einer Seite im Loop zu faden (z.B. vier Farben in Schleife). Ich habe schon alle möglichen Scripte gefunden, aber keines mit dem ich etwas anfangen kann (ich kenne mich allerdings auch mit Javascript noch nicht so gut aus, als dass ich es mir daraus selber "zusammenbauen" könnte). Auf der Seite soll nur ein Menü zu sehen sein und der komplette Background soll faden und wenn man einmal ins Menü klickt, wird die Hintergrundfarbe wieder weiss bzw. wenn man die Seite wieder neu lädt fängt das faden wieder an. Ich würde mich freuen wenn mir da jemand weiterhelfen könnte (wie gesagt, ich will es mir nicht leicht machen und hier einfach in die Runde fragen weil ich zu faul zum suchen bin, aber ich schon länger und kenne mich einfach noch nicht so gut damit aus).

Vielen Dank im voraus und schöne Grüße

Johannes
 
Sorry, ich weiss nicht wie ich den Text in einen Code-Block einfügen kann und habe ihn deswegen als Fliesstext gemacht .. Der Html-Text ist ein Ausschnitt von mehreren Fade-Beispielen die ich gefunden hatte, danach kommt der Javascript-Code. In diesem Falle verändern sich jeweils die Farben von einzelnen Div-Boxes und das nur einmalig (nicht als Schleife). Ich kenne mich wie gesagt nicht sonderlich gut mit dem Vokabular von Javascript aus und weiss nicht, welche Teile ich gebrauchen bzw. umändern kann um eine Loopschleife für den Background zu bekommen .. Ich freue mich über jeden Hinweis. Schöne Grüße

Johannes

<h2>Div Background Transition - <a href="javascript:colorFade('testdiv7','background','ffffff','e4cdcd',50,15)">div one</a> | <a href="javascript:colorFade('testdiv8','background','ffffff','e4cdcd',50,15)">div two</a> | <a href="javascript:colorFade('testdiv9','background','ffffff','e4cdcd',50,15)">div three</a></h2>
<div class="divs">

<div id="testdiv7">First Div</div>
<div id="testdiv8" class="lower">Second Div</div>
<div id="testdiv9" class="lower">Third Div</div>
</div>


// main function to process the fade request //
function colorFade(id,element,start,end,steps,speed) {
var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
var target = document.getElementById(id);
steps = steps || 20;
speed = speed || 20;
clearInterval(target.timer);
endrgb = colorConv(end);
er = endrgb[0];
eg = endrgb[1];
eb = endrgb[2];
if(!target.r) {
startrgb = colorConv(start);
r = startrgb[0];
g = startrgb[1];
b = startrgb[2];
target.r = r;
target.g = g;
target.b = b;
}
rint = Math.round(Math.abs(target.r-er)/steps);
gint = Math.round(Math.abs(target.g-eg)/steps);
bint = Math.round(Math.abs(target.b-eb)/steps);
if(rint == 0) { rint = 1 }
if(gint == 0) { gint = 1 }
if(bint == 0) { bint = 1 }
target.step = 1;
target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
var target = document.getElementById(id);
var color;
if(target.step <= steps) {
var r = target.r;
var g = target.g;
var b = target.b;
if(r >= er) {
r = r - rint;
} else {
r = parseInt(r) + parseInt(rint);
}
if(g >= eg) {
g = g - gint;
} else {
g = parseInt(g) + parseInt(gint);
}
if(b >= eb) {
b = b - bint;
} else {
b = parseInt(b) + parseInt(bint);
}
color = 'rgb(' + r + ',' + g + ',' + b + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
target.r = r;
target.g = g;
target.b = b;
target.step = target.step + 1;
} else {
clearInterval(target.timer);
color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
}
}

// convert the color to rgb from hex //
function colorConv(color) {
var rgb = [parseInt(color.substring(0,2),16),
parseInt(color.substring(2,4),16),
parseInt(color.substring(4,6),16)];
return rgb;
}
 
Das hast Du ja offenbar von hier:
JavaScript Color Fader
Und dort klappt es.
Kann man auch die Seite sehen auf der Du das eingebaut hast?

Tipp: Wenn Du Quellcodes hier richtig einbinden möchtest kannst Du diesen von [ CODE ]hier der code[ /CODE ] umgeben (Leerzeichen wegmachen). Für HTML und PHP gibt es eigene Platzhalter mit den entsprechenden Namen anstelle von CODE. Im erweiterten Editor hast Du diese auch als Button zur Verfügung.
 
Ja genau, daher hab ich es und das Script selber funktioniert auch. Mein Problem ist nur die das Ausselektieren. Es soll gar keinen hover-effekt geben und auch nicht auf einzelne Div-Boxes bezogen sein. Es soll nur der Hintergrund farblich "in Bewegung" sein (und bei der Menüauswahl dann stoppen). Die ganzen riesigen Javascripte sind für mich Neuland und deswegen wollte ich mich erkundigen ob Du (oder jemand anderes) eine Art Standard-Background-Script hat, was ich (möglichst idiotensicher) einfügen kann. Vielen Dank für die Antworten und Grüße

Johannes
 
Du meinst den Hintergrund der gesamten Seite? Der sich dann ohne Zutun des Nutzers farblich ändert? Ich bin mir nicht sicher, ob das mit diesem Script wirklich klappt, aber du müsstest diese Funktion per onload-Eventhandler starten.

Code: 
window.onload = function() { colorFade('idbody','background'  ,'ffffff','e4cdcd',50,15); };

HTML: 
<body id="idbody">

Dadurch wird sie beim Starten der Seite ausgeführt und auf den body bezogen.

Allerdings wird sie dadurch nicht wieder rückgängig gemacht. Dafür müsstest Du im onload-Eventhandler mit window.setTimeout() eine Schleife bauen. Wenn die eine Farbgebung abgeschlossen ist, soll er sie wieder rückgängig machen. Schematisch geschrieben:

Code: 
window.onload = function() {
 farbwechsel();
};

function farbwechsel() {
WENN idbody.backgroundColor = 'ffffff'
 DANN
  colorFade('idbody','background'  ,'ffffff','e4cdcd',50,15);
 ANDERNFALLS
  colorFade('idbody','background','e4cdcd', 'ffffff',50,15);
 NACH X Millisekunden diese Funktion wieder ausführen
 window.setTimout( function() { farbwechsel(); } );
}
 
Hi, vielen Dank, ich werde es gleich mal ausprobieren. Kannst Du mir vielleicht noch sagen, welchen der drei Codes ich wo genau einfügen muss bzw. muss ich einen als script-Datei abspeichern oder so?

Viele Grüße
 
Jedes JavaScript kannst Du auch in einer externen Datei speichern. Der von mir zuletzt genannte Code ist nur ein Schema und müsste von dir noch vervollständigt werden.
 
Hallo nochmal. Ich habe jetzt ein funtkionierendes Script gefunden, bin aber wohl zu blöd es richtig einzubauen.

Im CSS hab ich für die Farben und die Zeit geschrieben:


body.color0 { background-color: hsl( 0, 40%, 35% ); } body.color1 { background-color: hsl( 100, 40%, 35% ); } body.color2 { background-color: hsl( 200, 40%, 35% ); } body.color3 { background-color: hsl( 300, 40%, 35% ); } body.color4 { background-color: hsl( 400, 40%, 35% ); }
body { -webkit-transition: background-color 5s linear; -moz-transition: background-color 5s linear; -o-transition: background-color 5s linear; transition: background-color 5s linear; }


Als Javascript-Datei:


var colorT = 0; function changeColor() { document.body.className = 'color' + colorT % 18; colorT++; setTimeout( changeColor, 5000 ) } changeColor();
Und im Html-Dokument angefangen mit:


<body class="color0">
Wenn ich die Seite öffne erscheint der Background in der color0-Farbe, aber das Faden setzt nicht ein. Weiss jemand wo mein Fehler liegt und kann mir weiterhelfen?

Schöne Grüße

Johannes
 
Verwende bitte Code-Tags wenn Du Quellcode hier im Forum zeigst. Dann wäre dein Quellcode auch deutlich übersichtlicher.

Du musst eigentlich nur den onload-Eventhandler an dieser Stelle ergänzen:

Vorher:
Code: 
changeColor();

Nachher:
Code: 
windows.onload = function() { changeColor(); }

Sollte auch das nicht klappen, liegt irgendwo ein JavaScript-Fehler vor. Den kannst Du in deiner JavaScript-Konsole erkennen.
 
HI. Wie füge ich die Code-Tags denn ein? Ich habe die Änderung vorgenommen aber es tut sich immer noch nichts. Wahrscheinlich liegt, wie immer, irgendwo ein winziger Fehler vor, der alles zunichte macht ..

Ich habe den Code von dieser Seite (etwas nach unten scrollen)

Motion/Emotion

Grüße
 
Klick unterhalb des Editors auf den Button "Erweitert" damit du den erweiterten Editor siehst. Dort gibt es in der 2. Zeile der Symbole rechts 3 Buttons für Code, HTML und PHP. Verwende die, dann siehst Du auch die Schreibweise für Code-Tags.
 
Alles klar

HTML: 
<head>

<link href="css/style_1.css" rel="stylesheet" type="text/css" />
<script src="script/script_2.js"></script>

</head>

<body class="color0">

...

</body>

Code: 
body.color0  { background-color: hsl(    0, 40%, 35% ); }
body.color1  { background-color: hsl(  100, 40%, 35% ); }
body.color2  { background-color: hsl(  200, 40%, 35% ); }
body.color3  { background-color: hsl(  300, 40%, 35% ); }
body.color4  { background-color: hsl(  400, 40%, 35% ); }

body {
  -webkit-transition: background-color 1s linear;
     -moz-transition: background-color 1s linear;
       -o-transition: background-color 1s linear;
          transition: background-color 1s linear;
}

Javascript:
Code: 
var colorT = ~~(Math.random()*18);

function changeColor() {
  document.body.className = 'color' + colorT % 18;
  colorT++;
  setTimeout( changeColor, 5000 )
}

windows.onload = function() { changeColor(); }

Vielen Dank für Deine Hilfe

Johannes
 
Korrigiere mal

HTML: 
<script src="script/script_2.js"></script>

zu

HTML: 
<script src="script/script_2.js" type="text/javascript"></script>

und ich hoffe Du hast den Doctype nur hier vergessen zu posten?!

Ansonsten wäre wie gesagt ein Link zu deiner Seite hilfreicher.
 
Hallo, ne den Doctype hab ich schon drinne und am type script liegt es auch nicht. Die Seite ist noch nicht online bezüglich des Links .. Ich kann mir nicht erklären wo der Fehler liegt. Soll ich noch mehr Code posten?

Schöne Grüße

Johannes
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben