Motion Path (モーションパス)
別名 Animate Along Path, Offset Path Animation
要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。
使いどころ
ルート上を進む飛行機や点、装飾的な移動要素
バリエーション
- CSS offset-path
- GSAP MotionPath
- auto-rotate
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にモーションパス(Motion Path)アニメーションを追加してください。アニメイトアロングパス(animate along path)とも呼ばれます。
小さな要素が独自の曲線ルートに沿ってゆっくり一定のペースで進み、進行方向を向くように回転させてください。
ループが飛ばずに繰り返されるよう閉じたルートにし、ルートは固定サイズのままにせずコンテナに合わせて拡大縮小させてください。似ているモーション
A
Orbiting Circles (オービティングサークル)
別名 Orbit Animation, Orbit, Orbiting icons
小さな円やアイコンが円軌道を描いて中心の周りを回ります。
使いどころ
連携サービスの図
[適用する場所]にオービティングサークル(Orbiting Circles)を追加してください。オービットアニメーション(orbit animation)、オービティングアイコン(orbiting icons)とも呼ばれます。
小さな円が中央の要素の周りを円形のリング上でゆっくり一定の速さで回り、外側のリングは逆向きにもっとゆっくり回るようにしてください。
ループは継ぎ目なく、回る項目は常に正立させ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。A
1
クリックしてください
Add to Cart Fly (カート追加フライ)
別名 Fly to cart, Add-to-cart animation
商品画像が縮みながら弧を描いてカートアイコンへ飛んでいきます。
使いどころ
EC サイト
[適用する場所]にカート追加フライ(Add to Cart Fly)のアニメーションを追加してください。フライトゥカート(fly to cart)、カート追加アニメーション(add-to-cart animation)とも呼ばれます。
追加ボタンを押すと、商品画像の小さなコピーが縮みながらなめらかで素早い弧を描いてカートアイコンへ飛び、カートは個数が更新されるときに小さく弾むようにしてください。
押すたびに一度だけ再生して元の商品カードは動かさず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は飛ぶ動きを省いて、カートの更新だけは行ってください。A
B
Animated Beam (ビームアニメーション)
別名 Connecting beam
2つの要素を結ぶ線に沿って、光るパルスが移動します。
使いどころ
連携図、データフロー図
[適用する場所]にビームアニメーション(Animated Beam)の効果を追加してください。コネクティングビーム(connecting beam)とも呼ばれます。
2つの要素を結ぶ線に沿って短く光るパルスが一定の速さで端から端へ進み、また最初から繰り返すようにしてください。なめらかで落ち着いた動きで。
つなぐ線そのものは常に表示し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はパルスを止めてください。中をスクロールしてください
Text Path Scroll (テキストパススクロール)
別名 Text Path Curve Scroll Animation
テキストが曲線のパスに沿って配置され、スクロールに合わせてその上を進みます。
使いどころ
ストーリーテリングのセクション
[適用する場所]にテキストパススクロール(Text Path Scroll)エフェクトを追加してください。テキストパスカーブスクロールアニメーション(text path curve scroll animation)とも呼ばれます。
テキストが曲線の上に乗り、スクロールに合わせてその上をすべるように動かしてください。下へスクロールすると進み、上へスクロールすると戻ります。
動きは遅れなくスクロール位置に直接連動させ、スクリーンリーダーには通常のテキストとして読めるようにしてください。SVG & Shapeのほかのモーション
Shape Morph (シェイプモーフ)
別名 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
あるベクター図形が別の図形へ滑らかに変形します。
使いどころ
アイコンの状態切り替え、ヒーローグラフィック
[適用する場所]にシェイプモーフ(Shape Morph)を追加してください。パスモーフィング(path morphing)、SVGモーフ(SVG morph)とも呼ばれます。
五角形がくびれて星になるように、ある図形が別の図形へ滑らかに変わり、各点が均一で落ち着いたペースで所定の位置へ移動するようにしてください。
ちらつきのないきれいな変形になるよう両方の図形の点の数と対応をそろえ、ループではなく状態が変わるたびに一度だけ再生してください。ABC
ABC
マウスを乗せてください
SVG Displacement Distortion (SVGディスプレイスメントディストーション)
別名 feTurbulence Distortion, Displacement Map Effect
SVGフィルターがアニメーションするノイズでテキストや図形を歪ませます。
使いどころ
液体や波紋のホバー効果
[適用する場所]にSVGディスプレイスメントディストーション(SVG Displacement Distortion)のホバー効果を追加してください。ディスプレイスメントマップエフェクト(displacement map effect)とも呼ばれます。
ポインターを乗せている間、テキストや図形が揺れる水越しに見るように波打ってゆらめき、効果はふわっと現れ、ポインターが外れるとくっきりした状態に戻るようにしてください。
静止時に負荷がかからないよう歪みフィルターは効果が有効な間だけ適用し、キーボードフォーカスでも同じ効果を出してください。