今回は、HTML・CSS・JavaScript（GSAP）だけで構築した
「RPGファンタジー風オープニングアニメーション」を紹介します。
🪄 使用した技術
HTML / CSS / JavaScript
GSAP（GreenSock Animation Platform）
GSAPは、アニメーションの動きを細かく制御できるJavaScriptライブラリで、
タイミング・順序・速度・透明度などを自由に操れる強力なツールです。
🌟 今回の実装ポイント
🎨 1. Headerアニメーション
ページを開いた瞬間に、
Header全体 → ロゴ → 各ナビリンク
の順で「上からふわっと」表示されるように設定しました。
tl.from(".header", { y: -60, opacity: 0, duration: 1 });
tl.from(".logo", { y: -40, opacity: 0, duration: 0.8 }, "-=0.5");
tl.from(".nav ul li", { y: -20, opacity: 0, stagger: 0.15 });
アニメーションの順序はGSAPのtimelineを使うことでスムーズに管理できます。
これにより、まるでタイトル画面が立ち上がるような演出を再現しました。
🌌 2. Heroセクションの登場演出
Heroにはパーティクル背景（星や光の粒）と背景画像を組み合わせ、
その上にテキストを配置しました。
tl.from(".hero h2", { opacity: 0, y: -30, duration: 1 });
tl.from(".hero p", { opacity: 0, y: -20, duration: 1 }, "-=0.5");
tl.from(".hero button", { opacity: 0, y: 20, duration: 1 });
この順序で、
タイトルがふわっと表示
サブテキストが下から重なるように出現
そして最後にボタンが浮かび上がる
という流れにしています。
💡 3. 背景の透明感と奥行き
Heroの背景画像には半透明レイヤーを重ねることで、
幻想的な雰囲気を演出しました。
CSSで簡単に調整できます👇
.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4); /* 半透明の黒 */
z-index: 1;
}
これにより、パーティクルの輝きとテキストがバランス良く映えます。
🧠 学べるポイントまとめ
✅ GSAPで要素を順番に出現させる方法
✅ 背景に透明レイヤーを重ねて幻想的に見せるテクニック
✅ HeaderやHeroを時間差でアニメーションさせる実装手順
✅ HTML/CSSのみの構成で「演出感」を出すデザインの考え方
🪶 制作のねらい
ゲーム会社のサイトや、ポートフォリオサイトにおいて、
「最初の3秒で世界観を伝える」ことはとても重要です。
GSAPを使うことで、コード量を増やさず、
まるでオープニングムービーのようなLPを作ることができます。
📘 今後の展開
次回はこのページに**スクロール演出（ScrollTrigger）**を加えて、
セクションごとに動くRPG風のページを構築していく予定です。
