Clip Reveal (クリップリビール)
別名 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path やマスクが端や一点から広がり、画像やテキストが少しずつ現れます。
使いどころ
画像や見出しの表示
バリエーション
- left to right
- right to left
- top to bottom
- bottom to top
- circle
- inset
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にクリップリビール(Clip Reveal)の登場エフェクトを追加してください。マスクリビール(mask reveal)、ワイプリビール(wipe reveal)、イメージリビール(image reveal)とも呼ばれます。
切り抜きの境界が左から右へ移動し、コンテンツ自体は動かずに少しずつ見えてくるようにしてください。滑らかに、始まりと終わりは柔らかく。
何もずれないよう最初から要素の領域を確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全体を表示した状態にしてください。似ているモーション
中をスクロールしてください
Image Reveal Wipe (画像リビールワイプ)
別名 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
覆いが縮む、またはマスクの縁が広がることで画像が現れます。
使いどころ
スクロールで現れる記事の画像
[適用する場所]に画像リビールワイプ(Image Reveal Wipe)を追加してください。マスクリビール(mask reveal)、クリップパスリビール(clip-path reveal)とも呼ばれます。
画像がスクロールで画面に入ってきたら、覆いが片側から拭き取られるように退き、スクロールに合わせてなめらかに画像を見せてください。画面から出るよりずっと前に完全に見えている状態にします。
レイアウトがずれないよう画像の領域をあらかじめ確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から画像をすべて見せてください。A
マウスを乗せてください
SVG Mask Reveal (SVGマスクリビール)
別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。
使いどころ
画像やコンテンツの表示演出
[適用する場所]にSVGマスクリビール(SVG Mask Reveal)のホバー効果を追加してください。クリップパスリビール(clip-path reveal)、スポットライトマスク(spotlight mask)とも呼ばれます。
ポインターを乗せている間は円形のマスクが中央から広がって下のコンテンツを見せ、ポインターが外れると再び閉じるようにしてください。滑らかで、やや素早く。
何もずれないよう2つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。ABCD EFGHI JKLM
Mask Reveal (マスクリビール)
別名 Line Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
テキストが見えない境界線の裏から滑り上がり、何もないところから現れるように見えます。
使いどころ
エディトリアルな見出し
[適用する場所]にマスクリビール(Mask Reveal)のテキスト登場エフェクトを追加してください。ラインマスクリビール(line mask reveal)、テキストマスキング(text masking)とも呼ばれます。
各行が見えない境界線の裏から滑り上がり、何もないところから現れるように、1行ずつ順番に、素早くなめらかに、弾まずに表示されるようにしてください。
テキストがスクロールで画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしですぐに表示してください。A
B
クリックしてください
Curtain / Panel Wipe (カーテン/パネルワイプ)
別名 Page wipe, Curtain reveal, Stripe transition, Staggered panels
塗りつぶしのパネルが画面を横切って古いページを覆い、引いていくと新しいページが現れます。
使いどころ
ポートフォリオサイトや制作会社サイトのページ移動
[適用する場所]にカーテン/パネルワイプ(Curtain / Panel Wipe)のページトランジションを追加してください。ページワイプ(page wipe)、スタッガードパネル(staggered panels)とも呼ばれます。
塗りつぶしのパネルが1枚ずつ順に画面を横切って古いページを覆い、完全に覆われている間にページを切り替え、パネルはそのまま画面外へ抜けて新しいページを見せるようにしてください。大胆でなめらかに。
パネルが古いページを覆う前に新しいページを見せないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードにしてください。Entrance & Exitのほかのモーション
A
要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。
使いどころ
モーダル、トースト、ページコンテンツの表示
[適用する場所]にフェードイン/フェードアウト(Fade In / Fade Out)のアニメーションを追加してください。フェード(fade)とも呼ばれます。
現れるときは要素がその場で完全な透明からはっきり見える状態へ変わり、消えるときは同じようにフェードアウトするようにしてください。穏やかに、移動や拡大縮小はなしで。
消えた後はクリックもキーボード操作もできないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は瞬時に切り替えてください。A
Fade In Directional (ディレクショナルフェードイン)
別名 Fade In Down, Fade In Left, Fade In Right
要素が片側から少しだけ移動して最終位置に収まりながらフェードインします。
使いどころ
読み込み時やスクロールで現れるセクション、カード
[適用する場所]にディレクショナルフェードイン(Fade In Directional)の登場アニメーションを追加してください。フェードインレフト(fade in left)、フェードインライト(fade in right)、フェードインダウン(fade in down)とも呼ばれます。
要素が片側から少しだけ移動して最終位置に収まりながらフェードインするようにしてください。素早く滑らかに、着地で減速し、弾みはなしで。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
Fade Out Directional (ディレクショナルフェードアウト)
別名 Fade Out Up, Fade Out Down
要素が一方向へ流れるように移動しながらフェードアウトします。
使いどころ
通知やカードを閉じるとき
[適用する場所]にディレクショナルフェードアウト(Fade Out Directional)の退場アニメーションを追加してください。フェードアウトアップ(fade out up)、フェードアウトダウン(fade out down)とも呼ばれます。
要素が一方向へ少しだけ移動しながらフェードアウトするようにしてください。素早く、去るにつれて加速します。
周りのコンテンツが早く詰まらないよう、フェードが終わってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。