状態間のトランジション · A から B へ
ページを持ち上げる遷移整页掀起转场
- 紙をめくる感じ
- 自分の位置が軸
- 奥行き
次のページへ進むとき、今のページが視線の下から持ち上げられ、少し回転しながら向こうへ倒れます。新しいページは下から全画面で上がってきます。ページ内のどこにいたかで、回転の支点が変わります。
使いどころ
ポートフォリオ、雑誌など「切り替え」より「めくる」がしっくりくる場面に向きます。ツール系や行き来の多いリストには使わないでください。毎秒めくると酔います。
パラメータ
total 1.05s · outer transform: translateY −34% · inner counter-translate + rotate −5deg · transform-origin: eye position · ease-in-out
レシピ
ページを持ち上げる遷移 → 1.05s ease-in-outページを持ち上げる遷移 → total 1.05s · outer transform: translateY −34% · inner counter-translate + rotate −5deg · transform-origin: eye position
AI に渡す一文
全ページを持ち上げる遷移を作ってください。支点は現在の視線位置（scrollY + ビューポート高）から取り、外側を約 34% 上へ、内側は逆方向へさらに動かし −5 度回転させます。2 つの速度差で奥行きを出します。新しいページは下の 100% から 0 へ上がります。全体は 1.05s、両端が遅く中間が速い曲線で。