ページ遷移
ページを移るあいだをつなぎ、見ている流れを途切れさせない演出です。曲線の幕で画面を覆って次のページへ抜ける動きや、一覧の画像が次のページの見出し画像へ広がる動きを、デモとコードで紹介しています。
ページ遷移のインタラクション（24件）
-
-
ページ遷移で今のページの中身が行ごとに上へ抜け、次のページの中身が下から順に入る
-
ページ遷移で階層を下りると今のページが左へ押し出され、パンくずに 1 段増える
-
ページ遷移でページの角が紙のようにめくれて、下から次のページが現れる
-
ページ遷移で一覧の項目名が大きくなりながら移り、そのまま次のページの見出しになる
-
ページ遷移で点の格子が押した所から膨らんで画面を埋め、しぼむと次のページになっている
-
ページ遷移で次のページ名の巨大な文字が穴になって広がり、中から次のページが現れる
-
ページ遷移でカメラのシャッターの羽根が閉じて開くと次のページになる
-
ページ遷移で今のページが蛇腹に折り畳まれ、次のページが広がって現れる
-
ページ遷移で単色の面が画面を横切って次のページに切り替わる
-
ページ遷移で見出しが下へ抜け、次のページの見出しが上から入る
-
ページ遷移で画面が奥へ遠のき、次のページが手前から来て収まる
-
ページ遷移でタイルが順に裏返って次のページになる
-
ページ遷移でページが立方体の面のように回り、次のページが横から来る
-
ページ遷移で今のページがカードの大きさに縮んで横へ送られ、次のカードが広がる
-
ページ遷移でカーテンが降り、中央にロゴが描かれてからカーテンが上がって次のページになる
-
ページ遷移でページ名の大きな文字を流す横長のバーが画面を覆い、次のページへ切り替わる
-
ページ遷移で上端の進捗バーが伸びきると、次のページへ切り替わる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。