No.055
CURSOR CSSJS

Cursor Trail

マウス追従の光の残像が複数フェードしながら消えるエフェクト。ポートフォリオサイト・クリエイティブLPでのリッチ表現に。

DEMO

▼ この枠内でマウスを動かしてください ▼

CODE

HTML
<div class="demo-stage ct-stage"><div class="ct-hint">▼ この枠内でマウスを動かしてください ▼</div></div>
CSS
.demo-stage.ct-stage { position:relative; background:#0F0F12; min-height:320px; overflow:hidden; cursor:none; }
.ct-hint { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.45); font-family:'Oswald',sans-serif; letter-spacing:.18em; font-size:.85rem; pointer-events:none; }
.ct-dot { position:absolute; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle, #E91B89 0%, rgba(233,27,137,0) 70%); pointer-events:none; transform:translate(-50%,-50%); animation:ct-fade .85s ease-out forwards; }
@keyframes ct-fade { from { opacity:.9; } to { opacity:0; transform:translate(-50%,-50%) scale(.3); } }
JS
(function(){
  var stage = document.querySelector('.ct-stage');
  if(!stage) return;
  stage.addEventListener('mousemove', function(e){
    var rect = stage.getBoundingClientRect();
    var dot = document.createElement('span');
    dot.className = 'ct-dot';
    dot.style.left = (e.clientX - rect.left) + 'px';
    dot.style.top  = (e.clientY - rect.top)  + 'px';
    stage.appendChild(dot);
    setTimeout(function(){ dot.remove(); }, 850);
  });
})();

AI PROMPT

Claude Cursor v0
PROMPT
マウス追従の光の残像が消えていくCursor Trailエフェクトを作って。親要素にposition:relative+overflow:hidden+cursor:none。mousemoveイベントでgetBoundingClientRectから相対座標を取り、毎回spanを動的生成（radial-gradientで光球を表現）。CSS keyframesでopacity:.9→0+scale(.3)へ.85s ease-out、終了後setTimeoutでremove。ポートフォリオ・クリエイティブLPの差別化に。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの教科書 新版 マルチデバイス時代のインターフェース設計 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

カーソルトレイル（Cursor Trail）とは

マウス追従の光の残像が複数フェードしながら消えるエフェクト。ポートフォリオサイト・クリエイティブLPでのリッチ表現に。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

ブランドサイト・ポートフォリオ・LPのファーストビューなど、世界観を演出したい場面に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。