はじめに
ヒーローセクションは、ページを開いた瞬間の印象に関わりやすい場所です。ただ、最初から要素をたくさん動かしすぎると読みにくくなり、演出だけが前に出やすくなります。そこで取り入れやすいのが、スクロール量に合わせて少しずつ見え方を変える方法です。
GSAP と ScrollTrigger を使うと、テキスト、背景、光のレイヤーを別々に制御しながら、全体としてひとつの流れに見せることができます。このサンプルでは、ヒーローを固定したまま見出しと背景の抜け方をずらし、ページの導入に奥行きを持たせています。
GSAP と ScrollTrigger の基本
GSAP は複数の要素を時間差で扱いやすく、ScrollTrigger を組み合わせるとスクロール位置とアニメーションを自然に結び付けやすくなります。単純なフェードだけでなく、固定や進行に応じた変化、複数レイヤーの同期までまとめて扱えるので、この手の演出とは相性がいいです。
- ファーストビューに動きを付けたい
- スクロール量に合わせて演出を制御したい
- CSS だけでは作りづらい表現を入れたい
- 固定中の時間を使って情報を段階的に見せたい
実装ポイント
- ヒーロー要素は最初にしっかり読める位置へ置き、動き出す前の状態を整える
- 見出し、補足、背景光を同じタイミングで動かさず、少しずつ差をつけて奥行きを出す
- スクロール量に応じた変化は transform と opacity を中心に組んで負荷を抑える
- ピン留めの長さを取りすぎず、次のコンテンツへ気持ちよく移れる長さで止める
まとめ
スクロール連動のヒーローは、動かす量よりも順番の設計を整える方が見え方を作りやすいです。何を先に見せて、どこで抜いて、次のセクションへどう渡すかを整理するだけでも、印象は少し変わってきます。GSAP と ScrollTrigger はその調整がしやすいので、導入の質感を整えたいときに候補にしやすい組み合わせです。