マウスを動かすと、スポットライトが移動するマウスストーカーです。
左上のボタンクリックで画面全体が明るくなります。
この
ボタンは再度押すと、またスポットライトの状態に戻ります。
スポットライト以外の領域の色は、ボタンを押すたびにランダムに変化します。
ランダムなので同じ色が表示されることもあります。
スポットライト以外の領域の色は「黒色、緑色、青色」の３色指定していますが、増加させることもできるし
１色だけ指定すると、その色だけになります。
■CSSの#MoLで透過度を「 opacity:0.9; 」と指定しているので、薄く背景が見えています。
この数値を「 opacity:1; 」とすると、スポットライト以外の領域が完全に見えなくなります。
数値はお好みで指定して下さい。
■スポットライト状態の時は、マウスクリックは「スポットライトOff」しか動作しません。リンクは動作しません。
ブラウザ Firefox だけ、少し違う動作をします。
このページから、当サイト内のリンクページに飛んで戻ってくると、画面は明るいままです。
その他のブラウザでは、画面は最初の暗いページに戻ります。
スポットライトの仕組みは、
教えて！goo の回答者：fujillin さんの説明を参考にしました。
動作の基本は、一番シンプルなマウスストーカーの
マウスストーカー１■画像■画像１個で１個 です。
透明な穴は背景色を指定しない「div領域」です。丸くするために角丸指定の黒色の border 枠線を付け、さらに全画面を黒色で覆うために、太さ 2000px の outline を重ねています。
このあたりの作成方法は、
Altan１０-１■画像D■枠の中でサイズ変化回転上る-B がヒントです。
その後クリックで、opacity（透過度）を「0」にすることで「div領域」を消しますが、この時 CSS の transition を利用することでゆっくりと消すことができます。最近の CSS の進化に感謝！
■文章クリックのJavaScriptはこちら→ マウスストーカー１６-１■文字■スポットライト・文章
■ボタンクリックのボカシの付いたJavaScriptはこちら→ マウスストーカー１７■文字■ボカシ付スポットライト・ボタン
■文章クリックのボカシの付いたJavaScriptはこちら→ マウスストーカー１７-１■文字■ボカシ付スポットライト・文章
昔は、透過の GIF 画像を使ってスポットライトを作成されてました。
できればその JavaScript も紹介したかったのですが、どうしても eval 関数が削除できなくて断念しました…。
