twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > Background Pattern

Background Pattern

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、現在使用するのには向いていません。

ページの背景に文字を敷き詰めるスクリプトです。スタイルシートを使っているので、ブラウザが対応していないと実行しません。ランダムな位置にランダムなサイズで指定した数だけ文字を表示するので、指定した数によっては少々ブラウザの処理に時間が掛かる可能性があります。

<script type="text/javascript"><!--
function intRandom(max) {
  return Math.floor(Math.random()*max);
}
var msg;
if ((document.all)||(document.getElementById))
{
	for (i=0; i<50; i++) {
		msg='<div style="position:absolute; filter:alpha(Opacity=20); opacity:0.2; top:'+
			intRandom(98)+'%; left:'+intRandom(98)+'%; font-size:'+intRandom(16)+
			'px; color:blue"></div>';
		document.write(msg);
	}
}
//-->
</script>

このJavaScriptは、<BODY>~</BODY>の中ならばどこに記述しても大丈夫ですが、できるだけ</BODY>直前にしましょう。配置する文字と数は自由に変更することができますが、あまり数を多くすると表示に時間がかかる環境があるかもしれません。

実行結果を見たい方は、サンプル表示してみてください。ただし、サンプル表示はページ表示後に強引に表示処理を行なうようにサンプルを改変してあるため、ほかのJavaScriptと相性が悪く処理に時間が掛かります。ご了承ください。