ShowMotion

Page Transition

Crossfade Page Transition (クロスフェードページトランジション)

別名 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto

古いページがフェードアウトし、同じ場所に新しいページがフェードインします。

使いどころ

標準的なページ遷移

バリエーション

  • simultaneous fade
  • out-in fade
  • blur crossfade

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]にクロスフェードページトランジション(Crossfade Page Transition)を追加してください。クロスディゾルブ(cross-dissolve)、フェードトランジション(fade transition)とも呼ばれます。
ページを移動するとき、古いページのフェードアウトと同時に、同じ場所へ新しいページをフェードインさせてください。やわらかく、やや速めに。
フェード中に何もずれないよう両方のページを同じ位置に置き、切り替え後は新しいページのメイン見出しにフォーカスを移してください。

似ているモーション

Fade Through (フェードスルー)

別名 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"

出ていくコンテンツが完全にフェードアウトしてから、入ってくるコンテンツがわずかに拡大しながらフェードインします。

使いどころ

関連のない画面どうしの切り替え

Fade In / Fade Out (フェードイン/フェードアウト)

別名 Fade

要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。

使いどころ

モーダル、トースト、ページコンテンツの表示

Shared Axis (共有軸トランジション)

別名 Shared axis X/Y/Z

出ていくコンテンツと入ってくるコンテンツが、フェードしながら X・Y・Z いずれかの軸に沿って一緒に動き、空間的な関係を示します。

使いどころ

ステッパー、同階層の移動、ドリルダウン

Curtain / Panel Wipe (カーテン/パネルワイプ)

別名 Page wipe, Curtain reveal, Stripe transition, Staggered panels

塗りつぶしのパネルが画面を横切って古いページを覆い、引いていくと新しいページが現れます。

使いどころ

ポートフォリオサイトや制作会社サイトのページ移動

Preloader Curtain Lift (プリローダーカーテンリフト)

別名 Splash screen, Intro loader

ロゴやカウンターを載せた全画面のイントロレイヤーが、スライドまたはフェードで消えてサイトが現れます。

使いどころ

サイトの初回読み込み

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。