概要
明るいパネルが縦12枚に分かれ、タイトル表示のあとランダムな時間差で上へ消えていき、背後のモノクロ背景ヒーローが立ち上がる、シネマティックなオープニング。
使用技術
・GSAP
実装ポイント
・カーテンパネルはJS側で `PANEL_COUNT = 12` 枚を `innerHTML` で動的生成し、`flex:1` で等分割
・各パネルを `transformOrigin:”bottom center”` の `scaleY:1` から、消える時は `transformOrigin:”top center”` に切り替えて `scaleY:0`。上端へ吸い込まれるように縮む
・`stagger: { amount: 0.4, from: “random” }` でバラバラと不規則に開く演出。イージングは `expo.inOut`
・ヒーロー登場は別関数 `playHeroAnimation()` に分離し、`tl.add(playHeroAnimation, “-=0.8”)` でカーテンが上がりきる少し前から先行開始。カーテンと中身がオーバーラップして途切れなく見える
・タイトル文字は `.title-line`（`overflow:hidden`）＋ `.title-word`（初期 `translateY(110%)`）のマスクリビール。背景は `from({scale:1.2})` でズームアウトさせ奥行きを出す
コアスニペット
// 初期は下端基準で全高、退場時は上端基準で0へ縮める
tl.set(".curtain-panel", { scaleY: 1, transformOrigin: "bottom center" });
// …タイトル退場のあと
tl.to(".curtain-panel", {
duration: 1.2,
scaleY: 0,
transformOrigin: "top center", // 上に向かって縮む
stagger: { amount: 0.4, from: "random" }, // ランダムにバラバラと
ease: "expo.inOut",
}, "-=0.2")
.add(playHeroAnimation, "-=0.8"); // 上がりきる少し前からFV先行開始