初めてのWEB制作で懐中電灯つくりました #JavaScript

こんにちは、来年の4月からやっと大学生になれるちゃちゃまる（@chachmaru）です。LIGアドベントカレンダー23日目書いていきます！

展示作品のアーカイブ用WEBサイト

東大x藝大クリエイティブサークル「UT-HACKs」というものがございまして、縁あって僕もメンバーとして活動しています。そのサークルで11月21-23日に開催された駒場祭にインスタレーション作品を展示してきたので、アーカイブ用のWEBサイトを制作することになりました。ちゃちゃまる人生初のWEB制作です。

作品は光を中心としたものになっているので、WEBサイトでも光を何らかの形で表現したいなぁ、と考えていました。そこで、コンテンツを懐中電灯で照らしながら見ていくサイトなんでどうだろう！と思い、ものすごいググりながら実装しました。

懐中電灯

いろいろ試行錯誤した結果、以下のようになりました。

HTML

index.html

<svg id="lighting" x="0" y="0" width="10000" height="10000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<defs>
    <radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#000"/>
      <stop offset="20%"  stop-color="#333"/>
      <stop offset="100%" stop-color="#fff"/>
    </radialGradient>
    <mask id="mask">
      <rect x="0" y="0" width="10000" height="10000" fill="#fff" />
      <ellipse id="light" cx="0" cy="0" rx="0" ry="0" fill="url(#grad)" />
    </mask>
</defs>
<rect x="0" y="0" width="10000" height="10000" fill="#000" mask="url(#mask")></rect>
</svg>

SVGで黒い巨大な四角形をつくり、黒から白の円形グラデーションを適用した円でマスクします。マスクのcxとcyはjQueryで指定するため、値を0にしておきます。

CSS

style.css

svg#lighting {
    position:fixed;
    z-index: 2;
    left: 0; top: 0;
    pointer-events: none;
}

コンテンツよりSVGが前に表示されるよう、z-indexでコンテンツより上にもってきます。

jQuery

script.js

$(document).ready(function(){
  var light = document.getElementById('light');
    var back  = document.getElementById('back');
    var moveLight = function(e) {
        light.setAttribute('cx', e.clientX);
        light.setAttribute('cy', e.clientY);
    };
    document.body.addEventListener('mousemove', moveLight);
}

マウスの座標を取得し、SVGのcxとcyに値をいれます。これでマウスを追尾する円、つまり懐中電灯ができました。

〆

これだとWEBサイトとしてかなり読みにくいので、どこかに電気スイッチを配置して、押すと反転するようにします。タイトルや重要なコンテンツなどにネオンエフェクトをかけて懐中電灯で照らさなくても見えている状態にする、といったギミックも面白いかもしれません。

冒頭でも言いましたが、初WEB制作なので、コードに至らない部分などございましたらぜひご指摘お願いいたします！