概要
数字が上下にスライドしながら切り替わる、暖色パーティクル背景付きのデジタル時計。サイトのキービジュアルや待受向けの演出。
使用技術
・GSAP（数字スライドとパーティクル）
・setInterval（1秒ごとの時刻更新）
実装ポイント
・`setInterval(updateClock, 1000)` で毎秒更新し、6桁を文字列比較して変化した桁だけ `animateDigit` を呼ぶ差分更新
・桁の入れ替えは新旧2つの `.digit` を重ね、旧を `y:-100%`、新を `y:100%→0%` へ `power3.inOut` でスライドさせ `filter: blur` を併用。`.digit-container` の `overflow: hidden` で枠外を切る
・`visibilitychange` でタブ非表示中は `clearInterval` で停止し、復帰時は `isReset` モードで `killTweensOf` して即座に正しい時刻へ強制書き換え
・日付は `toLocaleDateString(“en-US”, …)` を大文字化して表示
・背景パーティクルは20個をランダム配置し、`onComplete` で自身を再帰呼び出しする自己ループで漂わせる
コアスニペット
clockInterval = setInterval(updateClock, 1000);
// 変化した桁だけアニメーション（差分更新）
for (let i = 0; i < 6; i++) {
if (currentTimeStr[i] !== prevTimeStr[i]) {
animateDigit(elements[ids[i]], currentTimeStr[i]);
}
}
// 旧を上へ、新を下から: 重ねてスライド + blur
tl.to(oldDigitEl, { y: "-100%", opacity: 0, filter: "blur(4px)", ease: "power3.inOut" }, 0);
tl.to(newDigitEl, { y: "0%", opacity: 1, filter: "blur(0px)", ease: "power3.inOut" }, 0);