Farbverlauf

Bei diesem Javascript handelt es sich um einen Farbverlauf, bestehend aus den Grundfarben des Lichts rot, grün und blau, an deren Schnittflächen gelb, violett sowie cyan auftreten.

Eingeschickt wurde das Javascript mal wieder von unserem User Vollautomatisch 🙂

In dem Javascript könnt ihr selbst festlegen, wie breit der Farbverlauf sein soll (im Beispiel auf 200 Pixel Breite gesetzt), ihr könnt einstellen ob der Farbverlauf an der linken oder rechten Seite des Bildschirmes erscheinen soll und ihr könnt auch den z-index einstellen. Dieser legt fest, auf welcher „Ebene“ eurer Homepage der Farbverlauf erscheinen wird.

Da der Farbverlauf relativ lang ist (aufgrund der dargestellten Farben und der weichen Übergänge) eignet sich dieses Javascript insbesondere für Homepages mit viel Inhalt, bei denen man auch mal etwas weiter nach unten scrollen muss…

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- //================================================= // (C)opyright by Vollautomatisch, July 1st 2007 // Do not edit anything below this dashed line, // unless you know, what you are doing :) //================================================= var ausrichtung = 'links'; // 'links' oder 'rechts' var breite = 200; // Breite des Farbverlaufs in Pixeln; var zIndex = 1; // z-index - je höher, desto weiter "vorn" liegt der Farbverlauf function dec2hex (zahl) { zahl = parseInt(zahl); var hex = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"); var hex2 = new Array("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0A", "0B", "0C", "0D", "0E", "0F"); if (zahl < 16) { return hex2[zahl]; } else { var kopie = zahl; for (var i = zahl; i > (zahl-17); i--) { if (i %16 == 0) { return (hex[i/16] + "" + hex[(kopie-i) % 16]) } } } } function hex2dec (zahl) { if (zahl.substr(0, 1) == '#') { zahl = zahl.substring(1, 7); } zahl = zahl.toLowerCase() + ''; var hex = '0123456789abcedf'; var farbwert = new Array(); var r = zahl.substring(0, 2); var g = zahl.substring(2, 4); var b = zahl.substring(4, 6); farbwert[0] = parseInt( hex.indexOf( r.substring(0, 1) ) ) * 16 + parseInt( hex.indexOf( r.substring(1, 2) ) ); farbwert[1] = parseInt( hex.indexOf( g.substring(0, 1) ) ) * 16 + parseInt( hex.indexOf( g.substring(1, 2) ) ); farbwert[2] = parseInt( hex.indexOf( b.substring(0, 1) ) ) * 16 + parseInt( hex.indexOf( b.substring(1, 2) ) ); return farbwert; } function rgb2hsv (farbe) { r = farbe[0] / 255; g = farbe[1] / 255; b = farbe[2] / 255; rgb = dec2hex( farbe[0]) + '' + dec2hex(farbe[1]) + '' + dec2hex(farbe[2] ); max = max(r, g, b); min = min(r, g, b); // Berechnung von H (h) if (r == max) { h = (g - b) / (max - min) * 60; } else if (g == max) { h = ( 2 + (b - r) / (max - min) ) * 60; } else if (b == max) { h = ( 4 + (r - g) / (max - min) ) * 60; } if (h < 0) { h += 360; } // Berechnung von S (s) if (max == 0) { s = 0; } else { s = 1 - (min / max); } // Berechnung von V (v) v = max; return new Array(h, s, v); } function hsv2rgb (hsv) { h = hsv[0] % 360; s = hsv[1]; v = hsv[2]; h1 = parseInt( (h / 60)); f = (h / 60) - h1; p = v * (1 - s); q = v * ( 1 - (s * f) ); t = v * ( 1 - ( s * (1 - f) ) ); if (h1 == 0) { r = v; g = t; b = p; } if (h1 == 1) { r = q; g = v; b = p; } if (h1 == 2) { r = p; g = v; b = t; } if (h1 == 3) { r = p; g = q; b = v; } if (h1 == 4) { r = t; g = p; b = v; } if (h1 == 5) { r = v; g = p; b = q; } r = parseInt( (r * 255) ); g = parseInt( (g * 255) ); b = parseInt( (b * 255) ); var rgb = new Array(r, g, b); return rgb; } var breite2 = 360; var verlfaktor = 1; var verlstart = 0; function initVerlauf() { var posleftright = ( ausrichtung == 'links' ) ? 'left' : 'right'; document.write('<div style="position:absolute;'+posleftright+':0px;top:0px;width:'+breite+'px;float:left;z-index: '+zIndex+';">'); for ( i = verlstart; i < (breite2 + verlstart); i+=verlfaktor ) { hsv = new Array(i, 1, 1); rgb = hsv2rgb(hsv); var r = dec2hex( rgb[0] ); var g = dec2hex( rgb[1] ); var b = dec2hex( rgb[2] ); document.write('<div style="background-color: #' + r + '' + g + '' + b + ';"> </div>'); } document.write("</div>"); } //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/verschiedenes/farbverlauf/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">initVerlauf();</script> <!-- präsentiert von kostenlose-javascripts.de -->