概要
ナビゲーションリンクにマウスを乗せると文字が1字ずつ演出する、9種類のホバーエフェクト集。メニューやボタンのアクセントに使えるカタログ的なサンプル。
使用技術
・GSAP（各文字のトゥイーン）
実装ポイント
・共通の `splitText()` で文字を1字ずつ `<span>` 化し、半角スペースは ` ` に置換して詰まりを防ぐ
・Split Slide（01）は文字を上下2段に複製し、`overflow:hidden` の枠内で `y:-100%`/`0%` にスライドさせて入れ替える
・3D Cube（02）やDomino Flip（07）は `rotateX`/`rotateY` と `perspective`・`transform-style:preserve-3d` で立体回転を表現
・Glitch（05）は `skewX`・`x`・`textShadow` を毎回ランダム値（関数指定）＋`repeat`/`yoyo` でノイズ感を出す
・Hacker Decoder（06）はGSAPを使わず `setInterval` でランダム文字を差し替え、`iteration` を徐々に進めて左から確定させる
コアスニペット
// 共通の文字分割ヘルパー：1文字ずつ<span>化し、半角スペースは に
const splitText = (target) => {
const text = target.textContent.trim();
target.innerHTML = "";
text.split("").forEach((char) => {
const span = document.createElement("span");
span.textContent = char === " " ? " " : char;
target.appendChild(span);
});
return target.querySelectorAll("span");
};