初めに
暗い背景にスポットライトを当てたような効果をcssやjavascriptを使って実装したいと思い、学習した内容や参考サイトをもとに作ってみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
やりたいこと
カーソルの動きに沿ってスポットライトを当て、暗くて読みづらい文字列が読めるようにしたい。
完成形のイメージ
実際に出来上がったコードと結果は以下の通りです。
See the Pen rNLvQMB by redrabbit1104 (@redrabbit1104) on CodePen.
Point
- 背景は常に暗い状態にしなければならない
- 背景には文字列が書かれている
- マウスのカーソルの動きに沿ってスポットライトの効果が出るようにする
- スポットライトは丸い形をしている
- スポットライトの真ん中にカーソルが位置する
- カーソルの当たった部分以外は暗い状態のままにする
まずはhtmlとcssを用意する
背景になる部分をspot、そして文字列を含むspot__containerを用意します。
<body>
<div class="spot">
<div class="spot__container">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, reiciendis ullam sit libero recusandae
//中略
magni possimus illum amet optio aut eum ea sapiente similique ad iure dolorum ut, quidem cum architecto.
</p>
</div>
<script src="spot_light.js"></script>
</body>
css(実際にはscssを使用）で背景の位置とサイズを決めます。画面全体にしたいのでwidthとheightを100%にします。spot__containerには文字列が入りますが、widthを70vwに指定、上下の余白を20px、真ん中に来るように左右の余白はautoにします。
.spot {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&__container {
width: 70vw;
margin: 20px auto;
}
}
#課題①-スポットライトの実装
スポットライトは周りが暗く、光が当たった部分だけ明るくなります。そのような効果をどのように実装すればでしょうか。スポットライトは球の中心点から一定の距離までは明るさを保ち、遠くなると徐々に暗くなります。これはcssのgradientを使えば同じような効果を得られます。その中でも円形にしたいので、radial-gradientを試してみました。
//radial-gradientの構文
radial-gradient(形状とサイズ at 中心位置, 開始色, 途中色, 終了色);
まず、htmlの文字列が邪魔なのでコメントアウトします。
<body>
<div class="spot">
<div class="spot__container">
<!-- <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, reiciendis ullam sit libero recusandae
//中略
magni possimus illum amet optio aut eum ea sapiente similique ad iure dolorum ut, quidem cum architecto. -->
</p>
</div>
そしてspotにradial-gradientを以下のように記述します。
.spot {
//中略
background-image: radial-gradient( //追記
circle at 50% 50%,
blue 20px,
yellow 50px,
green 150px
);
&__container {
//中略
}
}
表示される結果を見てみると、画面の真ん中に円の形をしたgradientが表示されました。
circle at 50% 50%によって円の中心となる位置を画面の真ん中にすることができました。つまり50% 50%が円の座標になります。blueは円の中心点から20pxまで続きますが徐々に色が薄くなります。yellowは50pxから始まり、greenは150pxから色が変わります。
円の外側を薄暗くすればいいのでは？
radial-gradientの一番外側の色をgreenではなく薄暗い黒にすれば、周りが暗いイメージになると思いました。実際にどうなるか見てみたいので、文字列もコメントアウトした部分を取り消し元に戻してみます。
.spot {
//中略
background-image: radial-gradient(
circle at 50% 50%,
blue 20px,
yellow 50px,
rgba(0, 0, 0, 0.9) 50px //薄暗い色にする
);
&__container {
//中略
}
}
円の周りの文字列が暗い状態ですが見えます。
この状態で途中色, 終了色をスポットライトみたいな感じに仕上げればいいなと思い、それに近い色を探したらtransparentに辿り着きました。透明にすれば背景の文字列も見えるはず。
.spot {
//中略
background-image: radial-gradient(
circle at 50% 50%,
transparent 20px, //色をtransparentに修正
transparent 50px, //色をtransparentに修正
rgba(0, 0, 0, 0.9) 50px
);
&__container {
//中略
}
}
近づいてきました。
暗いところとtransparentのスポットライトの境界線がはっきりし過ぎて不自然なので、黒色の部分のスタート位置を50pxから100pxにしてみました。
.spot {
//中略
background-image: radial-gradient(
circle at 50% 50%,
transparent 20px,
transparent 50px,
rgba(0, 0, 0, 0.9) 100px //50px -> 100pxに修正
);
&__container {
//中略
}
}
なかなかいい感じに仕上がりました。これでスポットライトが実現できました。
#課題②-マウスのカーソルに沿ってスポットライトが動くようにする
マウスが動いた形跡に合わせ、カーソルのところだけスポットライトを当てたいので、javascriptで実現できると思いました。
考え方-Point
①radial-gradientのcircle at 50% 50%のところで50% 50%というのはgradientが始まる円のx,y座標
②このx、y座標にマウスのカーソルの位置情報（座標）を代入すれば、カーソルがgradientの円の中心点になり、スポットライトの当たる部分になる
③マウスが動いたタイミングで、リアルタイムに②のマウスのカーソルの位置情報を取得してradial-gradientのcircle at x座標 y座標に代入することができれば、カーソルが当たっている部分がスポットライトになる
カーソルが動いた時のカーソルのx,y座標の値を取得する
javascriptでカーソルが動いた時の位置情報はMouseEvent.clientX、MouseEvent.clientYで取得できます。
ここでMouseEventはaddEventlistenerでmousemoveを指定した際に発生するイベントであることがわかりました。スポットライトの対象になるspot要素をquerySelectorで取得し、spotLightという関数を定義します。この関数の引数をevent(eでもいいしなんでもいいです）にし、このeventの中身をみたいのでconsole.log(event)で表示してみました。また、addEventListenerで第一引数をmousemoveにし、第二引数を先ほど定義したspotLightという関数にしました。これでマウスのカーソルが動くとMoveEventが発生し、そのeventの中身が見れるはずです。
"use strict";
const spot = document.querySelector(".spot");
const spotLight = (event) => {
console.log(event);
};
document.addEventListener("mousemove", spotLight);
コンソールで確認してみたら、MouseEventがいっぱい表示されました。マウスが動く度にコンソールにMouseEventが表示されるからです。
MouseEventをクリックしたら中身が見れました。オブジェクトの形になっていて中にはclientXとclientYというプロパティがあります。これがマウスのx,y座標です。
###javascriptでcssのstyleを操作する
cssのradial-gradientのcircle at 50% 50%の50% 50%のところは円の中心点の座標x,yでした。このx,yをjavascriptのmouseイベントで取得したx,y座標を代入すれば、マウスのカーソルの座標とradial-gradientの円の座標を一致させることができます。
この考え方をベースにしてsetAttributeを使って関数spotLightに追記します。
"use strict";
const spot = document.querySelector(".spot");
const spotLight = (event) => {
spot.setAttribute(
"style",
`background-image:
radial-gradient(circle at ${event.clientX}px ${event.clientY}px,
transparent 0px, transparent 30px, rgba(0,0,0,0.9) 50px)`
);
};
document.addEventListener("mousemove", spotLight);
console.log(event)は不要なので削除します。また、spotにsetAttributeでstyle属性を追加します。そしてbackground-imageにradial-gradientを記述します。x,y座標はxのところにevent.clientXを、yのところにはevent.clientYをそれぞれ代入します。これはeventのプロパティで確認した値です。
また、cssで記述したradial-gradientはもう必要ないので（javascriptで記述済み）削除します。
.spot {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
//削除する
background-image: radial-gradient(
circle at 50% 50%,
transparent 20px,
transparent 50px,
rgba(0, 0, 0, 0.9) 100px
);
//ここまで
&__container {
width: 70vw;
margin: 20px auto;
}
}
これでカーソルの周りが光るスポットライトの完成です。
参考サイト
https://developer.mozilla.org/ja/docs/Web/API/Element/mousemove_event
https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientX
https://developer.mozilla.org/ja/docs/Web/CSS/background
https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient()
http://www.htmq.com/css3/radial-gradient.shtml
https://qiita.com/yukiB/items/31a9e9e600dfb1f34f76