パーツ番号 05-01-12 ・ JavaScript使用
カーソル追従スポットライトカード
マウスの位置にあわせて柔らかな光がカード内を動き回る演出。WordPressのダークテーマのサービス紹介や会員限定コンテンツの案内カードに向いています。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。