概要
「Loading…」表示中に数値が0→100までカウントアップし、上下に分かれた暗幕が開いてヒーローが現れる、王道の高級感あるページオープニング。
使用技術
・GSAP
実装ポイント
・カウント表示は `{ val: 0 }` のダミーオブジェクトを `power2.inOut` で2秒補間し、`onUpdate` で `Math.floor()` して表示更新。進捗バー（`.loader-line` の `width`）も位置パラメータ `”<“` で同一開始にそろえて同期
・カーテンは上下2枚を `transform-origin` 上下に分け、`”curtainSplit”` ラベルで同時発火。`y:”-100%”` と `y:”100%”` を `power4.inOut` で開き、割れ目からヒーローを覗かせる
・テキストは `.reveal-wrap`（`overflow:hidden`）＋ `.reveal-text`（初期 `translateY(110%)`）の下から突き上げるマスクリビール。`stagger:0.15` で行ごとに時間差
・`.set(“.hero”, {visibility:”visible”}, “curtainSplit+=0.1”)` や `”curtainSplit+=0.6″` などラベル相対指定で、カーテンの動きと中身の登場を細かく重ねている
・timeline末尾で `document.body.style.overflow = “auto”` に戻し、演出完了までスクロールを封じる
コアスニペット
let loadObj = { val: 0 };
tl.to(loadObj, {
val: 100,
duration: 2.0,
ease: "power2.inOut",
onUpdate: () => {
counter.innerText = Math.floor(loadObj.val);
},
})
.to(loaderLine, { width: "100%", duration: 2.0, ease: "power2.inOut" }, "<")
// …カーテン割れ
.add("curtainSplit")
.to(".loader-curtain-top", { y: "-100%", duration: 1.4, ease: "power4.inOut" }, "curtainSplit")
.to(".loader-curtain-bottom", { y: "100%", duration: 1.4, ease: "power4.inOut" }, "curtainSplit");