[JavaScript] Web2.0 的テキスト表現

Posted by
ぴろり
Posted at
2007/04/06 20:20
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ

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

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

ソースコード

 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 = '&nbsp;';
	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>
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事のアーカイブ

全ての記事 »
2007年
全てのカテゴリ »
電算室 » 開発メモ
全てのタグ »
, ,

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。