パーツ番号 08-06-12 ・ JavaScript使用

スポットライト・フラッシュライトカーソル

暗闇に覆われたエリアがカーソル周辺だけ光で照らされ、隠れたコンテンツが見える演出です。謎解き要素のあるキャンペーンページや特別感の演出に使えます。

jsdark

プレビュー

ソースコード

HTML

<div class="d08-06-12-content">
          <p>この下に隠れた<br>メッセージがあります</p>
        </div>
        <div class="d08-06-12-veil"></div>

CSS

.d08-06-12{cursor:none;background:#1e293b;overflow:hidden;}
        .d08-06-12-content{position:relative;z-index:1;color:#e2e8f0;font-size:13px;text-align:center;line-height:1.8;}
        .d08-06-12-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(15,23,42,.96);}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-12');
          var veil=root.querySelector('.d08-06-12-veil');
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            var x=e.clientX-r.left, y=e.clientY-r.top;
            veil.style.background='radial-gradient(circle 70px at '+x+'px '+y+'px, transparent 0, rgba(15,23,42,.96) 71px)';
          });
          root.addEventListener('mouseleave',function(){
            veil.style.background='rgba(15,23,42,.96)';
          });
        })();

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