ポップイン Pop-in
ポンと弾んで現れる
MOTION GALLERY
動く見本
ポップインやスタガー、パララックスなど、Webでよく使う動きの「名前」を動く見本つきで20件。気に入った見本はプロンプトとコードをコピーして、そのままAIに頼めます。
登場・退場
要素が現れる・消えるときの動き。ページやアプリの第一印象を決めます。
テキスト・数字
文字や数字に動きをつけて、読ませたいところへ目を導きます。
タイプライター Typewriter
1文字ずつ打ち込まれる
カウントアップ Count-up
数字が0から目標値へ増えていく
マーカー線 Marker highlight
蛍光ペンを引くように強調される
ワードスワップ Word swap
言葉が縦にめくれて入れ替わる
UIパーツの動き
ボタンやスイッチ、通知など、操作の手応えを作る小さな動き。
トグルスイッチ Toggle switch
つまみが滑ってON/OFFが切り替わる
ボタンの押し込み Button press
押された手応えと波紋
トースト通知 Toast notification
画面の端から通知が滑り込む
スケルトン Skeleton screen
読み込み中の形だけ先に見せる
スクロール演出
スクロールに合わせて要素を見せる、LPやWebサイトの定番演出。
スクロールでフェードイン Fade-in on scroll
画面に入った要素だけ順番に現れる
追従ヘッダー Sticky header
スクロールすると細くなって追従する
読了プログレスバー Scroll progress bar
どこまで読んだかが上部の線で分かる
パララックス Parallax
奥と手前で動く速さが違う
背景・雰囲気
主役を邪魔せずに画面へ奥行きや空気感を足す、背景の動き。
流れるグラデーション Animated gradient
色がゆっくり流れて変わる背景
ふわふわブロブ Floating blobs
ぼかした色の玉がゆっくり漂う
ライトスイープ Light sweep
カードの上を光が一筋通る
パーティクル Particles
小さな粒がゆっくり漂う
カメラワーク
動画やヒーロー映像で使うカメラの動きを、Web 上で CSS として再現した見本。動画生成AIへ指示するときの語彙の確認にも使えます。
条件に合う見本がありません。
絞り込みを解除する