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

現在位置 > LostTechnology > JavaScript > Lighting

Lighting

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。

指定した要素を発光させるアニメーションを実現するためのDynamicHTML(DOM+JavaScript)です。Visual Filterのglow処理を利用しているので、WindowsのInternet Explorer専用なり。スクリプトはscriptフォルダにあるものとして記述しています。

Sample

結構ビジュアル効果があります
<DIV id="light" style="width:100%; color:red; font-size:40px; font-weight:bold; filter:glow(color=orange,strength=0)">結構ビジュアル効果があります</DIV>

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。Color=#rrggbb(colors)で発光する色を変更できます。DIV要素には何を入れておいてもかまいません。

Visual Filterは、<DIV>内で指定してください。また、必ずstyle属性でwidth(横幅)を指定しなければなりません。position:absoluteを指定しておけば横幅を指定しなくても大丈夫です。

<SCRIPT type="text/javascript" src="script/lighting.js"></SCRIPT>

ここからスクリプトをファイルに保存して、<HEAD>~</HEAD>内に記述してスクリプトを読み込ませます。

<BODY onload="lighting('light');">

スクリプトは<BODY>のonload属性で実行します。

※当時と比べて文字の輪郭が汚くなっているのはブラウザやDirectXのバージョンによる違いなのか、それともClearTypeの副作用だったりするのだろうか?