はじめに
自分用メモ。
ヒーローは最初から全部を動かすと読みにくくなるので、スクロール量に合わせて少しずつ抜くくらいがちょうどいい。見出し、補足、背景光を同時に処理しない方が奥行きが出る。
このサンプルでは、ヒーローを固定したままレイヤーごとに抜け方をずらしている。最初の視認性を残しつつ変化だけ足す、という組み方として覚えておく。
GSAP と ScrollTrigger の基本
ここで見ておくのは、スクロール量と複数レイヤーをまとめて扱いやすい点。単純なフェードより、固定中の変化や同期をひとつの流れで持てるのが便利。
- ファーストビューに動きを付けたい
- スクロール量に合わせて演出を制御したい
- CSS だけでは作りづらい表現を入れたい
- 固定中の時間を使って情報を段階的に見せたい
組み合わせのポイント
- ヒーロー本文、補足、背景グローを別レイヤーとして扱い、抜け方に差をつける
- pin した時間を使って、読み終わったあとにゆっくり印象を変える
- 暗い導入と明るい後続セクションをつないで、色の変化も演出の一部にする
- テキストを先に読ませてから背景を広げる順番にして、視線を散らさない
実装のポイント
- ヒーロー要素は最初にしっかり読める位置へ置き、動き出す前の状態を整える
- 見出し、補足、背景光を同じタイミングで動かさず、少しずつ差をつけて奥行きを出す
- スクロール量に応じた変化は transform と opacity を中心に組んで負荷を抑える
- ピン留めの長さを取りすぎず、次のコンテンツへ気持ちよく移れる長さで止める
まとめ
覚えておくのは、ヒーローは動かす量より順番。何を先に読ませて、どこで抜いて、次へどう渡すかを先に決める。