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 は自動的にリンクされます・"<" は "<"、">" は ">" と書いてください　・MovableType関係の質問でテンプレートタグをそのまま書かれると見えません
名前	(匿名可/必須/公開)
メール	(匿名可/必須/非公開)
投稿確認	(必須) コメントスパム防止のため投稿前にを入力してから投稿してください。お手数ですがご協力のほど宜しくお願いいたします。

ヘッダメニュー

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

ソースコード

この記事を読んだ人はこんな記事も読んでいます

この記事のアーカイブ

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

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

コメントを投稿する

リファレンス

ブロガープロフィール

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

最近のコメント/関連記事

最近の人気記事

フッタメニュー

ヘッダメニュー

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

ソースコード

この記事を読んだ人はこんな記事も読んでいます

その他の関連する記事

この記事のアーカイブ

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

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

コメントを投稿する

リファレンス

ブロガープロフィール

ツール

関連する商品

モバイル

ナビゲーション

記事検索

勝手におすすめ

最近のコメント/関連記事

最近の人気記事

フッタメニュー