Pulsierender/fließender Hintergrundfarb-Wechsel - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Pulsierender/fließender Hintergrundfarb-Wechsel

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Pulsierender/fließender Hintergrundfarb-Wechsel

Pages: [1]

geschrieben von Menore am 15.07.2009 - 03:38

Morgen allerseits...

Wer im halb 4 noch Beitrage schreibt der ist Troll oder Ratloser.
Ich bin letzteres.

Ich brauche einen JavaScript, jedenfalls vermute ich , dass es mit JavaScript am einfachsten umzusetzen wäre, letztendlich ist es mir aber auch egal, wenn der grafische Effekt stimmt...

Was will ich eigentlich?

Meine gesamte Website ist darauf ausgelegt, dass man möglichst problemlos die Hintergrund Farbe des Body-Elements ändern kann (rest ist Schwarz/transparent/weiß, es eckt also Nirgends eine Farbe an) nun soll dieser Farbwechsel automatisch stattfinden (direkt mit Seitenaufruf), allerdings ist mir auch klar, dass ein direkter Wechsel von Rot auf Grün auf dauer Augenkrebs verursachen müsste, also soll der wechsel möglich fließend ablaufen, sprich bevor es von Rot auf Grün springt sollten noch alle Rot, Orange, Gelb, und Grüntöne durchlaufen (dann natürlich auch weiter über blau, Violett, bis wieder hin zu Rot).

Das sowas geht weiß ich, gesichtet hab ich das schon mal auf http://www.pleeboy.eu (niederländische Funsite, nur zur Demonstrationszwecken verlinkt! Eckt sich evtl mit Forenregeln....)

also eigentlich brauch ich den Script den die verlinkte Website für den Hintergrund verwendet hat. diesen will ich aber auch nicht einfach klauen.
Einzige Änderung zu dem Script von Pleeboy wäre, das dieses kreisförmige abdunkel zum unteren Rand hin Weiß sein muss (und etwas höher ansetzt).

Problem:
Völlige Unkenntnis in Java Script.
Bisher zusammengefrimeltes ist mir alles ausnahmslos kollabiert (Ist aus von Bibliotheken Stammenden Bausteinen zusammengesetzt gewesen habs mittlerweile auch nicht mehr, es war schlichtweg falsch, weil ich keine Ahnung habe).

Bitte:
Dass sich irgendwer meines Problemes annimmt.
Der Script wird nur auf dieser Website Verwendung finden. ist eine Private Website.

Gruß Menore

geschrieben von Danny am 15.07.2009 - 10:33

Hallo Menore,

ansich eine interessante Sache. Deswegen hab ich mich mal daran gesetzt.
Es ist so das die Hintergrundfarbe der kompletten Seite wechselt. Gleichzeitig liegt ein Bild mit dem Verlauf darüber, bei dem die farbigen Stellen transparent sind.

Das Bild sieht so aus:
http://www.pleeboy.eu//templates/yo....e_mask.png

Du könntest jetzt ein ähnliches Bild mit einem Verlauf von Weiß -> Transparent machen und als body Hintergrundbild einbinden.

Für den Farbwechsel hab ich ein kleines Script geschrieben:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Color Change</title>
<script type="text/javascript">
	<!--
   	// @ Autor: Danny Rosifka
   	// @ publisher: javarea.de 
   	// Bitte entfernen Sie diesen Vermerk nicht !
   	-->

	function bgColorChangeInit() {
		var element = document.getElementsByTagName("body")[0];
		var c_color = new Array(0,0,0,1,0);
		var speed = 100;
		
		bgColorChange(element, c_color, speed, 0);
	}
	
	function bgColorChange(el, color, speed, limit) {
		if(limit < 1) {
			limit =  Math.ceil(Math.random() * 1000) % 80 + 1;
			color[4] = Math.ceil(Math.random() * 1000) % 3;
		}
		limit--;
		
		color[color[4]] += color[3];
		if(color[color[4]] > 254 | color[color[4]] < 1) {	color[3] = color[3] * -1; }
		
		el.style.backgroundColor = 'rgb('+color[0]+','+color[1]+','+color[2]+')';
		window.setTimeout(function(){ bgColorChange(el,color, speed, limit) }, speed);
	}
	
</script>

</head>

<body onload="bgColorChangeInit()">

  Test

</body>

</html>

Getestet hab ich es allerdings nur im Firefox, wäre gut wenn du das vorher im IE nochmal überprüfst.

Zur Funktionsweise:
Es wird per Zufall eine Farbkomponente (Rot, Grün oder Blau) ausgewählt und diese dann um eine zufällige Anazhl an Schritten bei jedem Duchlauf um 1 erhöht. Die Geschwindigkeit der Durchläufe kann man mit speed festegen (je kleiner desto schneller..).
Danach wird per Zufall erneut eine Komponente gewählt und wieder bis zu einer zufälligen Zahl langsam erhöht.

Erreicht eine Komponente den maximalwert 255, wird die Richtung umgekeht und die Werte wieder verringert.

Schau es dir einfach mal an ob du dir das so oder so ähnlich vorgestellt hast.

Gruß Danny

geschrieben von Menore am 15.07.2009 - 16:52

Malzeit,
erstmal Danke, hab diesen Script ewig gesucht, aber irgendwie wollt den niemand Rausrücken...

Allerdings hab ich noch 2 Probleme + einen Änderungs Wunsch...

Probleme:
1. Wie muss ich die Maske im CSS einbinden?
Wenn ich es per:

	HTML-Quelltext
1: 2: 3:	Body { Background: url(images/page_mask.png) center fixed }

...mache, wird diese Angabe schlichtweg ignoriert...

2. Jedes Mal startet der Script mit Schwarz als Hintergrund Farbe, was dann in eine Zufällige Farbe übergeht, Ansich nicht schlimm, aber die gesamte Website ist in Schwarz/transparent/weiß (Weißanteil ist jedoch minimalistisch) gehalten, es sind also erstmal gefühlte 90% der Website unsichtbar/schwer zu erkennen.

Wunsch:
Das Mit den Zufallsfarben gefällt mir nicht so ganz, bei mir setzt sich das so um, dass bei manchen durchläufen manche Farben gar nicht erreicht werden, es kam mi speziell das Regenbogenspektrum (wers Wissenschaftlicher definiert haben will: elektromagnetisches Spektrum des sichtbaren Lichts) mit der Anomalie, dass es von Rot wieder in violett übergeht und die reihe damit eine Schleife bildet.
Sorry wenn das jetzt zuviel verlangt ist...

geschrieben von Danny am 15.07.2009 - 18:03

Hallo Menore

Deine CSS sollte eigentlich klappen. Stimmt der Pfad ? also liegt das Bild ausgehend von der CSS Datei im Ordner images/ ?

Habe das Script ein wenig abgeändert. Man definiert nun x beliebig viele Farben. Das Skript geht vom Startwert langsam in die erste Farbe über, dann in die zweite und so weiter .. Hat er die Liste durchgearbeitet fadet er wieder zur ersten Farbe usw.

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61:

<script type="text/javascript">
	<!--

   	// @ Autor: Danny Rosifka

   	// @ publisher: javarea.de 

   	// Bitte entfernen Sie diesen Vermerk nicht !
   	-->

	function bgColorChangeInit() {
		var element = document.getElementsByTagName("body")[0];

		var colorMarker = new Array(
			new Array(135, 68, 227),
			new Array(34, 0, 255),
			new Array(216, 217, 0),
			new Array(0, 255, 163),
			new Array(169, 255, 0),
			new Array(255, 148, 0),
			new Array(255, 0, 30),
			new Array(245, 0, 75),
			new Array(156, 12, 58),
			new Array(178, 161, 161),
			new Array(255, 255, 255)
		);
		var color = new Array(255,255,255,1,0);
		var speed = 100;
		
		bgColorChange(element, colorMarker, color, speed);
	}
	
	function bgColorChange(el, colorMarker, color, speed) {
		e = color[4];
		
		if(color[0] == colorMarker[e][0] & color[1] == colorMarker[e][1] & color[2] == colorMarker[e][2]) {
			if((colorMarker.length - 1) > e) {
				color[4]++;
			} else {
				color[4] = 0;	
			} 
		}
		color[0] += sign(colorMarker[e][0]-color[0]);
		color[1] += sign(colorMarker[e][1]-color[1]);
		color[2] += sign(colorMarker[e][2]-color[2]);
				
		el.style.backgroundColor = 'rgb('+color[0]+','+color[1]+','+color[2]+')';
		window.setTimeout(function(){ bgColorChange(el, colorMarker, color, speed) }, speed);
	}
	
	function sign(x) {
		if(x > 0) {
			return 1;
		} else if(x == 0) {
			return 0;
		} else {
			return -1;
		}	
	}
		
</script>

Die Startfarbe kannst du im color Array, in den ersen drei Elementen (hier 255,255,255) ändern.
Im ColorMarker Array sind die zu durchlaufenden Farben festgehalten. Er würde also ausgehend von weiß zuerst nach 135, 68, 227 verlaufen und dann weiter.

Umso mehr Farben man definiert, desto genauer kann man den Ablauf bestimmen. Ich habe mal ein paar Farben aus dem Spektrum des sichtbaren Lichts eingetragen.

Hoffe so sieht es besser aus

Gruß Danny

geschrieben von Menore am 16.07.2009 - 00:03

N'abend

Irgendwie ärgert mich JS gerade, es macht einfach nicht wie ich will

Bindet man dne Script direkt im HTML ein, da funktionierts bei Firefox alles tadelos und die anderen Scripts machen auch alle was sie sollen, der IE bekommt dann allerdings ne Krise (kennt man ja -_-) und gibt statt bunter Farben Fehlermeldungen raus (nur leider sind diese nicht so schön bunt wie der Script eigentlich sein sollte).
Binde ich nun das ganze in die externe scripts.js Datei ein, gibts nur ein entweder oder + alternative: garnix.
Und was auch patout nicht klappen will, das ganze so in die js einzubinden, dass ich dne Bodytag von jeglichen Einträgen freihalten kann (muss doch möglcih sein, dass per window.onload=function... usw)...
Wäre alles tausend mal leicher wenn ich JS selbst könnte, aber das für eine einzelne Seite zu lernen...

Ich hab keine Ahnung was da nun nicht stimmt...
Falls sich das mal wer ansehen will, ich häng die Datei an.
Und Bitte nicht all zusehr über die Scripts von mir lustig machen, das die nur Subsubsuboptimal sind weiß ich bereits selbst...
Wenn man wie ich keine Ahnung hat...

Oha, seh grad, hab seit 2 mins Geburtstag. eigentlich wollt ich vorher noch was erledigt haben... -_-

geschrieben von Menore am 16.07.2009 - 00:06

Ups, man Verzeihe mir diese Schusseligkeit, jetzt hab ich noch die Datei vergessen -.-

geschrieben von Menore am 17.07.2009 - 20:37

Hat sich alles erledigt, Thema kann geschlossen werden.
(falls das hier so üblich ist)

Script funktioniert tadellos.

Danke nochmal.

Gruß Menore

geschrieben von Danny am 17.07.2009 - 21:17

Oh hab deine Nachricht gestern zwar gelesen, dann aber vergessen noch zu antworten

aber hat sich ja nun geklärt.

Schöner Gruß
Danny