Gradation Text
Description:
グラデーション文字を出力します。
Demo:
Source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function fadeinGetColor(scol, fcol, steps, count) {
scol = (scol.charAt(0)=="#") ? scol.substring(1, scol.length) : scol;
fcol = (fcol.charAt(0)=="#") ? fcol.substring(1, fcol.length) : fcol;
var scol_red = parseInt(scol.substring(0,2), 16);
var scol_green= parseInt(scol.substring(2,4), 16);
var scol_blue = parseInt(scol.substring(4,6), 16);
var fcol_red = parseInt(fcol.substring(0,2), 16);
var fcol_green= parseInt(fcol.substring(2,4), 16);
var fcol_blue = parseInt(fcol.substring(4,6), 16);
var new_red = Math.round(((fcol_red - scol_red) / steps) * count) + scol_red;
var new_green = Math.round(((fcol_green- scol_green)/ steps) * count) + scol_green;
var new_blue = Math.round(((fcol_blue - scol_blue) / steps) * count) + scol_blue;
new_red = (new_red.toString(16).length==1) ? "0"+new_red.toString(16) : new_red.toString(16);
new_green= (new_green.toString(16).length==1) ? "0"+new_green.toString(16) : new_green.toString(16);
new_blue = (new_blue.toString(16).length==1) ? "0"+new_blue.toString(16) : new_blue.toString(16);
return "#"+ new_red+new_green+new_blue;
}
function gradationText(gtext, scol, fcol) {
var optxt= "";
for(i=0; i<gtext.length; i++) {
var gcol = fadeinGetColor(scol, fcol, gtext.length, i);
optxt += "<font color='" +gcol+ "'>" +gtext.charAt(i)+ "</font>";
}
return optxt;
}
//-->
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
//グラデーション文字の出力
// gradationText("文章", "開始色", "終了色")
document.write(gradationText("グラデーション文字のテストです。赤から青に変わっていきます。", "#ff0000", "#0000ff"));
//-->
</script>
</body>
</html>
Advice:
おまけ。グラデーションの文字をHTMLとして出力します。HTMLが使える掲示板なんかにお使いください。
Arrangement:
Browser:
Internet Explorer3.0以上
Netscape Navigator2.0以上