概要
スクロールで見出しが画面に入るたびに、文字が1字ずつ多彩なパターンで出現する11種のショーケース。ヒーローやセクション見出しの登場演出向き。
使用技術
・GSAP + ScrollTrigger（スクロール連動）
実装ポイント
・`data-js-splitText` を目印にJSで文字を `.char` の `<span>` へ分割し、`data-anim` 属性でパターンを出し分ける
・分割前は `visibility:hidden` で隠し、分割完了後に `visible` にしてFOUC（ちらつき）を防止
・ScrollTrigger共通設定は `start:”top 80%”` と `toggleActions:”play none none reverse”` で、戻りスクロール時に逆再生
・Slice Slide（09）は1文字を `clip-path:inset()` で上中下3段に切り抜いた複製を作り、各パーツを時間差でスライドさせる
・パターンごとに `blur`・`rotationX/Y`・`clipPath`・`scaleX` や `back.out`/`elastic.out` イージング、`stagger:{from:”random”}` などを使い分ける
コアスニペット
const type = element.getAttribute("data-anim");
const chars = element.querySelectorAll(".char");
const triggerSettings = {
trigger: element,
start: "top 80%",
toggleActions: "play none none reverse",
};
switch (type) {
case "fadeUp":
gsap.from(chars, { scrollTrigger: triggerSettings,
y: 100, opacity: 0, duration: 1, ease: "power3.out", stagger: 0.03 });
break;
// … blurReveal / rotateFlip / sliceSlide など data-anim ごとに分岐
}