T
op
S
CRIPTS
AUTO
M
OBILES
D
OWNLOADS
L
INK
B
BS
A
BOUT
F
EEDBACK
スクロールすると背景色を変更
説明
スクロールの度合いによって背景色を変更します。 RGB-HSB カラースライダー作成時に使用した HSB-RGB 変換用の関数を手直しして汎用性を高めた関数が使用されています。 背景色の明るさ、鮮やかさなどは変更可能。
サンプル
ソースコード
HEADに記述
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- var Cycle = 30; //■変換サイクル。1を指定すると360pxスクロールするごとに変化が一周する。 var Saturation=15; //■彩度。指定できる値は0-100。0にすると無彩色(灰色系)のまま変化なし。 var Brightness=100; //■明度。指定できる値は0-100。0にすると常に黒 function chgBgColor(){ var Hue; if(navigator.appName == "Microsoft Internet Explorer"){ Hue = document.body.scrollTop; } else{ Hue = window.pageYOffset; setTimeout("chgBgColor()",200) } var rgb = HSBtoRGB((Hue / Cycle) % 360,Saturation,Brightness); var r = format2(rgb[0]); var g = format2(rgb[1]); var b = format2(rgb[2]); document.bgColor= "#"+r+g+b; } //■HSBをRGBに変換する汎用関数。 // h 色相(Hue) 指定できる値は0-359の範囲の数値 // s 明度(Saturation) 指定できる値は0-100の範囲の数値 // b 彩度(Brightness) 指定できる値は0-100の範囲の数値 // 返り値 0-255のRGBの値がそれぞれ入った配列 // 例 HSBtoRGB(0,100,100) → 255,0,0 function HSBtoRGB(h,s,b){ H = h; S = s*2.55; V = b*2.55; if(S==0){ R=V; G=V; B=V; }else{ t1=V; t2=(255-S)*V/255; t3=H%60; t3=(t1-t2)*t3/60; if(H < 60){ R=t1; B=t2; G=t2+t3; }else if(H<120){ G=t1; B=t2; R=t1-t3; }else if(H<180){ G=t1; R=t2; B=t2+t3; }else if(H<240){ B=t1; R=t2; G=t1-t3; }else if(H<300){ B=t1; G=t2; R=t2+t3; }else if(H<360){ R=t1; G=t2; B=t1-t3; }else{R=0;G=0;B=0;} } return(new Array(R,G,B)); } //■10進法を16進法二桁表記にする function format2(str){ str = "0" + parseInt(str).toString(16); if(str.length>2){str=str.substr(1,2)} return(str) } //--> </SCRIPT>
BODYに記述
<BODY onScroll="chgBgColor()" onload="chgBgColor()">
- [BACK] -
|
AUTO
M
OBILES
|
D
OWNLOADS
|
L
INK
|
B
BS
|
A
BOUT
|
F
EEDBACK
Copyright © 1999-2005 By よーすけ
mailto:<
web@@@write-off.cside.com
>