Sparkle Cursor Trail
マウスカーソルに追従するキラキラエフェクト。
パーティクルアニメーションとスムーズなイージングで実装した軌跡エフェクトです。
Demo
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sparkle Cursor Trail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h1 class="desktop-text">マウスを動かしてみてください</h1>
<h1 class="mobile-text">画面をなぞってみてください</h1>
<p>カーソルに追従するキラキラエフェクト</p>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
overflow: hidden;
cursor: none;
font-family: 'Arial', sans-serif;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
pointer-events: none;
z-index: 1;
}
.content h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
background: linear-gradient(45deg, #ff6ec4, #7873f5, #4facfe);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientShift 3s ease infinite;
}
.mobile-text {
display: none;
}
.desktop-text {
display: block;
}
.content p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
}
@keyframes gradientShift {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(30deg);
}
}
/* カーソル */
.cursor {
position: fixed;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease;
mix-blend-mode: difference;
}
/* キラキラパーティクル */
.sparkle {
position: fixed;
pointer-events: none;
z-index: 9998;
animation: sparkleFloat 0.8s ease-out forwards;
}
.sparkle::before,
.sparkle::after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ffd700, #ffed4e, #fff);
animation: sparkleRotate 0.8s linear infinite;
}
.sparkle::before {
width: 3px;
height: 12px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.sparkle::after {
width: 12px;
height: 3px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes sparkleFloat {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-30px) scale(0.5);
}
}
@keyframes sparkleRotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(180deg);
filter: hue-rotate(360deg);
}
}
/* グロー効果 */
.glow {
position: fixed;
width: 200px;
height: 200px;
border-radius: 50%;
pointer-events: none;
z-index: 1;
background: radial-gradient(
circle,
rgba(138, 116, 249, 0.3) 0%,
rgba(255, 110, 196, 0.2) 30%,
transparent 70%
);
filter: blur(30px);
transition: transform 0.3s ease;
mix-blend-mode: screen;
}
/* レスポンシブ */
@media (max-width: 768px) {
body {
cursor: auto;
}
.cursor {
display: none;
}
.content h1 {
font-size: 1.8rem;
}
.content p {
font-size: 1rem;
}
/* モバイルでは文言を切り替え */
.desktop-text {
display: none;
}
.mobile-text {
display: block;
}
/* モバイルでもグロー効果は表示 */
.glow {
display: block;
}
}
script.js
// カスタムカーソル作成
const cursor = document.createElement('div');
cursor.classList.add('cursor');
document.body.appendChild(cursor);
// グロー効果作成
const glow = document.createElement('div');
glow.classList.add('glow');
document.body.appendChild(glow);
// マウス位置を追跡
let mouseX = 0;
let mouseY = 0;
let cursorX = 0;
let cursorY = 0;
let glowX = 0;
let glowY = 0;
// キラキラ生成の制御
let lastSparkleTime = 0;
const sparkleInterval = 50; // ミリ秒
// マウス移動イベント
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
// 一定間隔でキラキラを生成
const currentTime = Date.now();
if (currentTime - lastSparkleTime > sparkleInterval) {
createSparkle(mouseX, mouseY);
lastSparkleTime = currentTime;
}
});
// タッチ移動イベント（モバイル対応）
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
mouseX = touch.clientX;
mouseY = touch.clientY;
// 一定間隔でキラキラを生成
const currentTime = Date.now();
if (currentTime - lastSparkleTime > sparkleInterval) {
createSparkle(mouseX, mouseY);
lastSparkleTime = currentTime;
}
// グロー位置を更新
glowX = touch.clientX;
glowY = touch.clientY;
});
// スムーズなカーソル追従アニメーション
function animateCursor() {
// カーソルの遅延追従（イージング）
cursorX += (mouseX - cursorX) * 0.2;
cursorY += (mouseY - cursorY) * 0.2;
cursor.style.left = cursorX + 'px';
cursor.style.top = cursorY + 'px';
// グローのさらに遅い追従
glowX += (mouseX - glowX) * 0.08;
glowY += (mouseY - glowY) * 0.08;
glow.style.left = (glowX - 100) + 'px';
glow.style.top = (glowY - 100) + 'px';
requestAnimationFrame(animateCursor);
}
animateCursor();
// キラキラパーティクル生成
function createSparkle(x, y) {
const sparkle = document.createElement('div');
sparkle.classList.add('sparkle');
// ランダムな位置のオフセット
const offsetX = (Math.random() - 0.5) * 20;
const offsetY = (Math.random() - 0.5) * 20;
sparkle.style.left = (x + offsetX) + 'px';
sparkle.style.top = (y + offsetY) + 'px';
// ランダムなサイズ
const scale = 0.5 + Math.random() * 0.5;
sparkle.style.transform = `scale(${scale})`;
// ランダムな色相
const hue = Math.random() * 60 + 30; // 黄色〜オレンジ系
sparkle.style.filter = `hue-rotate(${hue}deg)`;
document.body.appendChild(sparkle);
// アニメーション終了後に削除
setTimeout(() => {
sparkle.remove();
}, 800);
}
// クリック時の特別なエフェクト
document.addEventListener('click', (e) => {
// 一度に複数のキラキラを生成
for (let i = 0; i < 12; i++) {
setTimeout(() => {
createSparkle(e.clientX, e.clientY);
}, i * 30);
}
// カーソルのスケールアニメーション
cursor.style.transform = 'scale(1.5)';
setTimeout(() => {
cursor.style.transform = 'scale(1)';
}, 200);
});
// タッチ開始時のエフェクト（モバイル対応）
document.addEventListener('touchstart', (e) => {
const touch = e.touches[0];
// 一度に複数のキラキラを生成
for (let i = 0; i < 12; i++) {
setTimeout(() => {
createSparkle(touch.clientX, touch.clientY);
}, i * 30);
}
});
// マウスが画面外に出たときの処理
document.addEventListener('mouseleave', () => {
cursor.style.opacity = '0';
glow.style.opacity = '0';
});
document.addEventListener('mouseenter', () => {
cursor.style.opacity = '1';
glow.style.opacity = '1';
});
Download
すべてのファイルをZIP形式でダウンロードできます。