はじめに
導入セクションで印象をつくりたいとき、背景だけを動かしても少し弱く見えることがあります。逆に見出しだけを大きく動かすと、今度は派手すぎて落ち着きがなくなります。そんなときは、背景と文字に別の役割を持たせるとまとまりやすくなります。
このサンプルでは、背景レイヤーはゆっくり流し、テキストは最初にしっかり見せたあとで少しずつ抜いていく構成にしています。大きな変化ではなく速度差で深さを出すので、静かなトーンのまま印象を残しやすいです。
組み合わせのポイント
- 背景はゆっくり動かして、ページ全体の空気感を支える役割にする
- 見出しは最初に読み切れる状態で置き、動かす前の視認性を優先する
- スクロール中は各レイヤーの速度差を小さくつけて、やりすぎない奥行きをつくる
- 補足テキストは中央にまとめて、動きの中でも読みやすさを崩さないようにする
- 明るい下層セクションへつなぐときは、色の変化も導入演出の一部として使う
まとめ
パララックスはそれだけでも成立しますが、文字の出し方と組み合わせると導入の完成度が一段上がります。背景が空気をつくり、テキストが意味を伝える、という役割分担で考えると、落ち着いたトーンでもしっかり印象に残るセクションを作りやすくなります。