はじめに
自分用メモ。
導入で印象を作りたいとき、背景だけだと弱いし、見出しだけ大きく動かすと強すぎる。背景と文字に別の役割を持たせる方がまとまりやすい。
このサンプルでは、背景はゆっくり流して、テキストは最初に読ませてから少しずつ抜く。速度差で深さを出すやり方として覚えておく。
組み合わせのポイント
- 背景はゆっくり動かして、ページ全体の空気感を支える役割にする
- 見出しは最初に読み切れる状態で置き、動かす前の視認性を優先する
- スクロール中は各レイヤーの速度差を小さくつけて、やりすぎない奥行きをつくる
- 補足テキストは中央にまとめて、動きの中でも読みやすさを崩さないようにする
- 明るい下層セクションへつなぐときは、色の変化も導入演出の一部として使う
実装のポイント
- 背景レイヤーとテキストレイヤーで別々のスクロール係数を持たせる
- 見出しは最初に安定した位置へ置き、動き出しを遅らせて読みを優先する
- 奥行きは大きな移動量ではなく、速度差と opacity の変化で作る
- 後続セクションへの色切り替えも含めて、ヒーロー全体を 1 つの導入として組む
まとめ
覚えておくのは、パララックス単体より文字の抜き方との組み合わせ。背景は空気、テキストは意味、という分担にすると扱いやすい。