Steelworks Landing Page Reveal

はじめに

今回の自分用メモ。

このコードで見ておきたいのは、5枚の画像をただ並べることではなく、全画面の画像レイヤーをあとから「並んで見える状態」に変換している点です。最終的には中央の1枚だけを全面へ拡張して終わるので、レイアウトというよりタイムライン設計のサンプルとして覚えておく。

構成のポイント

• HTML は全画面レイヤーとして5枚の .intro-img を重ねて置く
• CSS は固定ナビゲーション、プリローダー、全面配置の土台を作る
• JavaScript は GSAP で初期位置、整列、左右退避、中央拡大を時系列で制御する

最初から横並び DOM にしていないのが重要。全画面で重ねた状態から gsap.set() で整列を作る方が、そのまま中央 1 枚の全面復帰までつなげやすい。

組み合わせのポイント

• プリローダー、整列、左右退避、中央拡大を 1 本の流れとして見せる
• 5 枚の画像は最初に束感を持たせておき、整列で秩序を作ってから崩す
• 画像演出を先に終わらせて、テキストは最後に出して焦点を守る
• 全画面レイヤーと固定ナビを重ねて、ブランド LP らしい密度を作る

実装のポイント

• 画像は最初から横並びにせず、全画面重ね置きから gsap.set() で整列位置を作る
• 到着位置と開始位置を別々に計算して、整列と退避の両方に使い回す
• 真ん中の 1 枚だけ別クラスを持たせて、最後の拡張対象を明確にする
• テキストの表示は画像タイムラインの終盤へ寄せて、視線の分散を防ぐ

GSAP タイムラインの流れ

流れは以下の順番で整理されている。

1. プリローダーを伸ばしてから閉じる
2. 5枚の画像を画面外から中央へ集める
3. 左右4枚を外へ逃がす
4. 真ん中の .hero-img だけを scale 1、rotation 0、borderRadius 0 に戻す
5. 最後に nav とテキストを順番にフェードアップさせる

要するに、画像演出を先に終わらせてから文字を出す。この順番なら最初の視線が散りにくい。

画像リビールで気をつける点

• 各カードの開始位置と到着位置を別々に持っておく
• 回転角を少しずつ変えて、整列前の束感を出す
• 文字要素は最後に出して、演出の焦点を分散させない
• モバイルでは余白と画像幅がすぐ破綻するので、縮尺とギャップを早めに見直す

補足として、introImgScale と introImgGap は見た目への影響が大きい。ここがずれると整列の気持ちよさが崩れるので、画面幅ベースの計算はモバイル確認まで含めて見る。

テキストの出現タイミングも重要。行分割の手段より、いつ文字を出すかの方を優先して見る。

まとめ

今回のコードで覚えておくことは 3 つだけ。

• 全画面レイヤーをあとから整列状態に見せる
• 左右を逃がして中央だけ残す
• テキストは最後に出して演出の焦点を守る

ブランド系 LP の最初の数秒だけ強く見せたいときの組み立てとして再利用する。