パーツ番号 08-03-08 ・ JavaScript使用

カーソル追従スポットライト

プレビュー内でマウス位置に光の円が追従し、暗いパネルを照らします。WordPressの特集バナーやカードのホバー演出に使えます。

hoverjsdark

プレビュー

ソースコード

HTML

<div class="d08-03-08-panel">
          <span class="d08-03-08-txt">SPOTLIGHT</span>
          <span class="d08-03-08-glow"></span>
        </div>

CSS

.d08-03-08-panel{position:relative;width:100%;height:200px;border-radius:16px;background:#14162a;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:crosshair}
        .d08-03-08-txt{color:rgba(255,255,255,.14);font-size:28px;font-weight:800;letter-spacing:4px;z-index:2}
        .d08-03-08-glow{position:absolute;top:0;left:0;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(120,140,255,.55),transparent 65%);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .25s;mix-blend-mode:screen}
        .d08-03-08-panel:hover .d08-03-08-glow{opacity:1}

JavaScript

(function(){
        var p=document.querySelector('#item-08-03-08 .d08-03-08-panel');
        var g=p&&p.querySelector('.d08-03-08-glow');if(!p||!g)return;
        p.addEventListener('mousemove',function(e){
          var r=p.getBoundingClientRect();
          g.style.left=(e.clientX-r.left)+'px';g.style.top=(e.clientY-r.top)+'px';
        });
      })();

クラス名 .d08-03-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。