Scrollbar Effects
normal
<style type="text/css"> <!-- BODY { scrollbar-face-color: #COLOR CODE HERE; scrollbar-shadow-color: #COLOUR CODE HERE; scrollbar-darkshadow-color: #COLOUR CODE HERE; scrollbar-3dlight-color: #COLOUR CODE HERE; scrollbar-highlight-color: #COLOUR CODE HERE; scrollbar-arrow-color: #COLOUR CODE HERE; scrollbar-track-color: #COLOUR CODE HERE; }--> </style>
1 colour
<html> <head> <style type="text/css"><!-- body {scrollbar-base-color:#COLORHERE;} --></style> </head> </html>
blinking
<script> var mode=0 function blinkscroll(){ if (mode==0) document.body.style.scrollbarFaceColor="ff66cc" else document.body.style.scrollbarFaceColor="ff99cc" mode=(mode==0)? 1 : 0 } document.body.style.scrollbarArrowColor="ffffff" document.body.style.scrollbarTrackColor="ffffff" document.body.style.scrollbarShadowColor="ffffff" document.body.style.scrollbarHighlightColor="ffffff" document.body.style.scrollbar3dHighlightColor="ffffff" document.body.style.scrollbarDarkShadowColor="ffffff" setInterval("blinkscroll()",1000) </script>
rainbow changing
<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; file://-- > </script>
left scrollbar
<body style="> < direction: rtl"> <div style="> <direction: ltr"> </div> </body>
changes when hovered
<script language="JavaScript1.2"> < !-- //onMouseover Scrollbar effect- by Svetlin Staev (svetlins@yahoo.com) //Submitted to Dynamic Drive //Visit http://www.dynamicdrive.com for this script /*---------------[IE 5.5 Scrollbars colorer]--------------------*/ function scrollBar(line,face,theme) { if (!line||!face) { line=null; face=null; switch(theme) // Predefined themes { case "blue": var line="#78AAFF"; var face="#EBF5FF"; break; case "orange": var line="#FBBB37"; var face="#FFF9DF"; break; case "red": var line="#FF7979"; var face="#FFE3DD"; break; case "green": var line="#00C600"; var face="#D1EED0"; break; case "neo": var line="#BC7E41"; var face="#EFE0D1"; break; } } with(document.body.style) { scrollbarDarkShadowColor=line; scrollbar3dLightColor=line; scrollbarArrowColor="black"; scrollbarBaseColor=face; scrollbarFaceColor=face; scrollbarHighlightColor=face; scrollbarShadowColor=face; scrollbarTrackColor="#F3F3F3"; } } /*------------------[Pointer coordinates catcher]---------------*/ function colorBar(){ var w = document.body.clientWidth; var h = document.body.clientHeight; var x = event.clientX; var y = event.clientY; if(x>w||y-3>h) scrollBar('#000080','#BFDFFF'); // Your colors else scrollBar(null,null,"orange"); // A predefined theme } if (document.all){ scrollBar(null,null,"blue"); document.onmousemove=colorBar; } function offscreen(){ scrollBar(null,null,"green"); } document.onmouseout=offscreen; //-- > </script>
Back
//
Forward
Copyright (C) kute-kandy.com. All rights reserved.