はじめに
自分用メモ。
ページ遷移っぽい演出は、画面を覆う動きと中身の動きを分けて考えた方が重たくなりにくい。切り替わった感覚は欲しいけれど、内容は読めるままにしておきたい。
このサンプルでは、先にマスクで空気を変えて、そのあとで中身を入れ替える順番にしている。全部を同時に処理しない方が調整しやすい。
組み合わせのポイント
- マスクは画面全体の切り替え役として使い、最初に雰囲気を変える
- コンテンツは少し遅れて動かし、何が切り替わったのかを目で追いやすくする
- 入る動きと抜ける動きの速度を同じにせず、流れにメリハリをつける
- カード部分の余白や背景透過を整えて、切り替え中も情報が読める状態を保つ
- 演出の長さは印象より操作感を優先し、待たされている感じを出さない
実装のポイント
- マスク用レイヤーとコンテンツ用レイヤーを分けて、順番を別々に制御する
- 全画面の変化は clip-path や transform で組み、面の移動として見せる
- コンテンツ側は opacity と translate を中心にして、読める状態を保ったまま動かす
- ひとつの timeline に全部を詰め込みすぎず、役割単位で区間を分けて調整する
まとめ
覚えておくのは、ページ遷移風の演出は派手さより順番整理。何が先で何が後かを分けるだけでも、かなり自然に見えやすい。