yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Regenbogenscrollbalken



Bei diesem tollen Script werden aus öden standard Scrollbalken witzige Regenbogenscrollbalken.
Der Code wird im <head>-Bereich eingefügt.

Code:

<SCRIPT language="JScript">
<!--
var scrollPct, prevStep, nextStep, interStep

steps = new Array();
steps[0] = new Array(128,128,128);
steps[1] = new Array(255,0,0);
steps[2] = new Array(255,255,0);
steps[3] = new Array(0,255,0);
steps[4] = new Array(0,255,255);
steps[5] = new Array(0,0,255);
steps[6] = new Array(255,0,255);
steps[7] = new Array(255,0,0);
steps[8] = new Array(255,255,255);

function newColor(chan) {
var i=Math.floor(steps[prevStep][chan]+interStep*(steps[nextStep][chan]-steps[prevStep][chan]));
return i;
}

function scrollFunk() {
scrollPct=(steps.length-1)*document.body.scrollTop/(document.body.scrollHeight-document.body.clientHeight);
prevStep=Math.floor(scrollPct);
nextStep=Math.ceil(scrollPct);
interStep=scrollPct-prevStep;
var newRGB="rgb("+newColor(0)+","+newColor(1)+","+newColor(2)+")";
var invRGB="rgb("+(255-newColor(0))+","+(255-newColor(1))+","+(255-newColor(2))+")";
if (document.body.style.scrollbarTrackColor != null) {
document.body.style.scrollbarFaceColor=newRGB;
document.body.style.scrollbarTrackColor=invRGB;
}
}

window.onscroll=scrollFunk;
//-->
</SCRIPT>


Unter
Code:
steps
kannst du die einzelnen Farben in RGB einstellen. So ist der Scrollbalken hier zuerst grau, wechselt zu rot, dann zu gelb usw.
ACHTUNG! Du musst mehrere Absätze einfügen, damit du auf der Seite scrollen kannst.
Viel Spaß!

Geschrieben von Luk@s am 18.06.2004 (5775x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren