JavaScriptで作る2.0的テキスト表現

　JavaScriptを使ってテキストをWeb2.0的に(?)水面に反射したようなグラデーションで表示します。大量のDIV要素を作っているだけで実用性は多分ありません。

動作サンプル

ソースコード

　Windows XP と Firefox 1.5，Internet Explorer 6.0, Opera 9.1.0, Netscape 7.1 で動作確認済みです。ライセンスは GPL としますのでお好きにどうぞ。

<style>
#web20 { position: relative; font-size: 40px; }
.o { position: absolute; top: 0px; }
.a { position: absolute; width: 100%; height: 1px; overflow: hidden; }
.b { position: absolute; }
</style>

<div id="web20"></div>

<script type="text/javascript">
function web20nize (text) {
	var web20 = document.getElementById('web20');
	web20.innerHTML = ' ';
	var size = web20.offsetHeight;

	var html = '<div class="o">' + text + '</div>';
	for (var y = 0; y < size; y++) {
		var c = Math.floor (360 / size * y);
		c = c < 0 ? 0 : (255 < c ? 255 : c);
		html += '<div class="a" style="top:'+(y+size)+'px;">';
		html += '  <div class="b" style="top: '+(y-size)+'px; color: rgb('+c+','+c+','+c+');">';
		html +=      text;
		html += '  </div>';
		html += '</div>';
	}
	web20.innerHTML = html;
}

function startClock () {
	web20nize (new Date ());
	setTimeout ("startClock()", 1000);
}
startClock ();
</script>

コメントを投稿する

名前	(必須/公開)
メール	(必須/非公開)
返信先
コメント	お気軽にコメントをお寄せください・コメントを投稿するにはブラウザの JavaScript を有効にしてください・入力された通りに改行位置で改行されます・HTML タグは使用できませんが、文中の URL は自動的にリンクされます・"<" は "<"、">" は ">" と書いてください
投稿確認	(必須) コメントスパム防止のため投稿前にを入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。