17
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

LIGincAdvent Calendar 2015

Day 23

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

Posted at

こんにちは、来年の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制作なので、コードに至らない部分などございましたらぜひご指摘お願いいたします!

17
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?