CSS Spotlight

background:radial-gradient() の円形グラデーションでスポットライトを形成。

JSでグラデーションの中心をカーソルに合わせている。

グラデーションのレイヤー(.spotlight)自体を移動させてしまうと調整が大変なため、 radial-gradient() の中心を移動させる手法にしている。

想定される用法

ビジュアル演出のほか初回アクセス時のチュートリアルなどに使える。

チュートリアル利用時はカーソル追従はさせず、注目点に直接当てる形が好ましい。