JavaScriptとclip-pathを使って、カーソルの位置に合わせて写真をマスクする

こんにちは、ナカムラです。
今回はカーソルの位置に合わせて表示を制御するものを作ってみたいと思います。
カーソルの位置の取得や、表示の変更にはJavaScriptを、写真のマスクはclip-pathを使います。
とっても簡単です。

DEMO

画面内にカーソルを当ててみてください。
カーソルの位置に合わせて写真が丸く切り抜かれているかと思います。

See the Pen JavaScriptとclip-pathを使って、カーソルの位置に合わせて写真をマスクする by Nakamura (@takayo-nakamura) on CodePen.

基本スタイル

下準備としてまずはスタイルから解説していきます。
divで囲ったimgタグに対して、画面いっぱいになるようにしています。

#imageWrap {
  width: 100vw;
  height: 100vh;
}

#image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(100% 100%);
}

初期の段階でまだカーソルが当たっていないと写真が表示されてしまうため、
clip-path: polygon(100% 100%);で全体にマスクをかけておきます。

clip-pathについてはこちら
developer.mozilla.org

カーソルの移動に合わせてマスクする位置を変える

まずは対象になる要素を取得します。

const imageWrap = document.getElementById('imageWrap');
const image = document.getElementById('image');

画像を囲っているdiv（imageWrap）にaddEventListenerで「カーソルが動いた時」のイベントをつけていきます。
function の引数（e）を使って、カーソルの位置を取得することができます。
e.clientX：X値
e.clientY：Y値

あとはこの値を、画像（image）のstyleに、clip-Pathの値として挿入すれば完成です。

// カーソルに合わせてclip-pathの位置を変更する
imageWrap.addEventListener('mousemove', function (e) {
    image.style.clipPath = 'circle(8vw at ' + e.clientX + 'px ' + e.clientY + 'px)';
});

最後に

いかがでしょう、意外と簡単だったのではないかと思います。
今回はマスクする形やサイズは固定ですが、styleに挿入する値を変化するように処理を追加していけば、表示の形・サイズも変えることができます。

また今回はclip-pathを使いましたが、別の要素を用意し、それをJavaScriptで処理していけばカーソルに追従するオブジェクトを作ることもできます。
JavaScriptで位置の数値を付与する対象を変えるだけで、様々な表現が可能になります。
お試しください。