はじめに
今回の自分用メモ。
このコードで見ておきたいのは、5枚の画像をただ並べることではなく、全画面の画像レイヤーをあとから「並んで見える状態」に変換している点です。最終的には中央の1枚だけを全面へ拡張して終わるので、レイアウトというよりタイムライン設計のサンプルとして覚えておく。
構成のポイント
- HTML は全画面レイヤーとして5枚の
.intro-imgを重ねて置く - CSS は固定ナビゲーション、プリローダー、全面配置の土台を作る
- JavaScript は GSAP で初期位置、整列、左右退避、中央拡大を時系列で制御する
最初から横並び DOM にしていないのが重要。全要素を全画面で重ねておいて、gsap.set() で scale と x を与えて整列状態を作るから、そのまま中央1枚の全画面復帰までつなげやすい。
GSAP タイムラインの流れ
流れは以下の順番で整理されている。
- プリローダーを伸ばしてから閉じる
- 5枚の画像を画面外から中央へ集める
- 左右4枚を外へ逃がす
- 真ん中の
.hero-imgだけを scale1、rotation0、borderRadius0に戻す - 最後に nav とテキストを順番にフェードアップさせる
要するに、画像演出を先に終わらせてから文字を出している。この順番にしておくと、最初の視線が分散しにくい。
画像リビールで気をつける点
- 各カードの開始位置と到着位置を別々に持っておく
- 回転角を少しずつ変えて、整列前の束感を出す
- 文字要素は最後に出して、演出の焦点を分散させない
- モバイルでは余白と画像幅がすぐ破綻するので、縮尺とギャップを早めに見直す
補足メモとして、introImgScale と introImgGap はかなり見た目を支配する。ここが合っていないと、整列の気持ちよさがすぐ崩れる。とくに画面幅ベースで計算しているので、モバイル確認は必須。
あと、重要なのはテキストの出現タイミングで、行分割そのものは別手段でも置き換えられる。
まとめ
今回のコードで覚えておくことは3つだけでいい。
- 全画面レイヤーをあとから整列状態に見せる
- 左右を逃がして中央だけ残す
- テキストは最後に出して演出の焦点を守る
ブランド系の LP で、最初の数秒だけ強く見せたいときの組み立てとして再利用しやすい。