← 動的パーツギャラリーへ戻る

パーツ番号 05-01-12 ・ JavaScript使用

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

マウスの位置にあわせて柔らかな光がカード内を動き回る演出。WordPressのダークテーマのサービス紹介や会員限定コンテンツの案内カードに向いています。

jsdark

プレビュー

ソースコード

HTML

<div class="d05-01-12-card">
          <div class="d05-01-12-spot"></div>
          <h4>マウスを重ねてください</h4>
          <p>カーソルの位置に光が追従するインタラクティブなカードです。</p>
        </div>

CSS

.prev.d05-01-12{background:#12131c}
        .d05-01-12-card{
          position:relative;width:230px;padding:24px;border-radius:16px;
          background:#1b1d29;border:1px solid rgba(255,255,255,.08);
          overflow:hidden;color:#fff;
        }
        .d05-01-12-spot{
          position:absolute;width:180px;height:180px;left:-90px;top:-90px;
          border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.5),transparent 70%);
          pointer-events:none;opacity:0;transition:opacity .3s ease;
        }
        .d05-01-12-card:hover .d05-01-12-spot{opacity:1}
        .d05-01-12-card h4{position:relative;margin:0 0 8px;font-size:14.5px}
        .d05-01-12-card p{position:relative;margin:0;font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.65)}

JavaScript

(function(){
        var card=document.querySelector('.d05-01-12-card');
        if(!card)return;
        var spot=card.querySelector('.d05-01-12-spot');
        card.addEventListener('mousemove',function(e){
          var r=card.getBoundingClientRect();
          spot.style.transform='translate('+(e.clientX-r.left)+'px,'+(e.clientY-r.top)+'px)';
        });
      })();

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