01スクロール
タイムラインアニメーション
Timeline on scroll
スクロール量に合わせて縦線が伸び、通過した出来事が点と文字で現れる。
枠の中をスクロール
AIへの指示例
縦のタイムラインを、枠の中のスクロール量に合わせて上から伸ばしてください。通過した項目は赤い点が拡大し、文字は10px下からフェードインします。
デザイン参考
UI EFFECTS
Webサイトの演出名
24件
LPアニメーションの種類とスクロールアニメーション一覧。タイムライン、テキストリビール、スタッキングカードなど、Webサイトの演出名24を動く見本とAIへの指示例でまとめています。
01–08
スクロール
スクロールの位置に合わせて進む演出です。見本はページ全体ではなく、それぞれの枠の中だけで動きます。
02スクロール
スクロールテキストリビール
Scroll text reveal
大きな一文が、スクロールに合わせて一文字ずつ濃くなる。
枠の中をスクロール
AIへの指示例
大きな一文を中央に固定し、枠の中のスクロールに合わせて一文字ずつ不透明度0.2から1へ埋まるテキストリビールにしてください。
03スクロール
スタッキングカード
Stacking cards
次のカードが前のカードに重なり、手前の見出しだけが残る。
枠の中をスクロール
AIへの指示例
カードをstickyで重ね、次のカードが前のカードに覆いかぶさり、手前の見出しだけが少し見えるスタッキングにしてください。
04スクロール
背景色の切り替え
Background color change on scroll
スクロールで背景が昼、夕、夜へ移り、文字と太陽の印が切り替わる。
枠の中をスクロール
AIへの指示例
枠の中のスクロールに合わせて背景を白、夕方の暖色、夜の紺へ滑らかに変え、文字色を反転し、太陽の印を月へ替えてください。
05スクロール
隠れるヘッダー
Hide-on-scroll header
下へスクロールするとヘッダーが隠れ、上へ戻すとすぐ現れる。
枠の中をスクロール
AIへの指示例
ヘッダーは下方向のスクロールで上へ隠れ、上方向ではすぐに戻してください。変形にはイージングを付けます。
06スクロール
スクロールスパイ
Scrollspy
今読んでいる節だけ、目次の色と左のバーが変わる。
枠の中をスクロール
AIへの指示例
横の目次が枠の中のスクロール位置に追従し、今の節だけアクセント色と左の短いバーで示すスクロールスパイにしてください。
07スクロール
トップへ戻るボタン
Back-to-top button
ある程度進むと上へ戻るボタンが現れ、押すと先頭へ戻って消える。
枠の中をスクロール
AIへの指示例
一定量スクロールしたら円形の上向きボタンをフェードと拡大で出し、押すと枠の先頭へ滑らかに戻り、ボタンは消えるようにしてください。
08スクロール
スクロールで拡大
Zoom on scroll
枠の中の絵が、スクロールに合わせて中央を保ったまま拡大する。
枠の中をスクロール
AIへの指示例
枠いっぱいに切った画像を、スクロールに合わせて中央を保ったまま1.0から1.2へ拡大し、中央に見出しを重ねてください。
09–16
マウスと入力
カーソルと入力に反応する演出です。タッチ端末では、タップや指の動きで同じ変化を起こせます。
09マウスと入力
3Dチルト
3D tilt on hover
カーソルに合わせてカードが傾き、光の反射が追従する。
ホバー、または指でなぞる
AIへの指示例
カードがカーソルに合わせてrotateXとrotateYで傾き、光のグレアが同じ位置を追う3Dチルトにしてください。指では触れた位置に傾けます。
10マウスと入力
スポットライトホバー
Spotlight hover
暗いカードの上を、円形の光がカーソルとともに移動する。
ホバー、または指でなぞる
AIへの指示例
暗いカードの上を円形のライトがカーソルとともに動き、近い辺だけ境界が淡く光るスポットライトホバーにしてください。
11マウスと入力
ホバーで画像切り替え
Image swap on hover
左の項目に合わせ、右の絵が切り替わる。
ホバー、またはタップ
AIへの指示例
左の一覧をホバーまたは選択すると右の画像が切り替わり、選んだ行は強調と左のアクセント罫にしてください。
12マウスと入力
テキストロール
Text roll on hover
ホバーで文字が上へ抜け、同じ文字が下から入る。
ホバー、またはタップ
AIへの指示例
ホバーで各文字が上へ抜け、同じ文字が下から入るテキストロールにしてください。文字ごとに少し遅らせます。タッチではタップで再生します。
13マウスと入力
ホバーで画像プレビュー
Hover image reveal
項目に触れると、小さな絵がそばに現れてついてくる。
ホバー、またはタップ
AIへの指示例
一覧をホバーすると小さな画像がカーソルのそばに拡大しながら現れるようにしてください。タッチではタップでその場に固定します。
14マウスと入力
フローティングラベル
Floating label
ラベルが枠の中央から、枠線の上へ小さく上がる。
入力して試す
AIへの指示例
入力のラベルは枠の中央から、フォーカスか入力済みで枠線上へ小さく上がり、アクセント色になるフローティングラベルにしてください。
15マウスと入力
インラインバリデーション
Inline validation
入力の正しさをその場で示し、枠の色とメッセージが変わる。
入力して試す
AIへの指示例
入力中にその場で検証し、不正なら赤枠とエラー文、正しければ緑枠とチェックをフェードインさせてください。
16マウスと入力
ローディングボタン
Loading button
ボタンの文言がスピナーに替わり、終わると完了になる。
クリックして試す
AIへの指示例
ボタンは幅を固定したまま、ラベルがフェードアウトしてスピナーになり、終わるとチェックと「完了」に替わるようにしてください。
17–24
見せ場
画面の見せ場になる演出です。開く、数える、揺らす、反応する。ループするものは、動きを減らす設定では止まります。
17見せ場
ビュートランジション
View transition
一覧の絵と見出しが、詳細のヒーローへ変形して移る。
クリックして開く
AIへの指示例
一覧の画像と見出しが、詳細のヒーローへ共有要素として変形するビュートランジションにしてください。戻る操作で逆に戻します。
18見せ場
ライトボックス
Lightbox
絵をクリックすると、暗い面の中央へ拡大して開く。
クリックして開く
AIへの指示例
画像をクリックすると暗いオーバーレイが約0.8の濃度でフェードインし、画像が中央へ拡大するライトボックスにしてください。Escと閉じるで戻します。
19見せ場
ホットスポット
Hotspots
絵の上の点が脈打ち、触れると名前と価格が出る。
ホバー、またはタップ
AIへの指示例
画像の上に脈打つ点を置き、ホバーまたはクリックで名前と価格のカードを出すホットスポットにしてください。
20見せ場
カウントダウンタイマー
Countdown timer
日・時・分・秒が分かれた桁で、1秒ごとに減る。
AIへの指示例
日・時・分・秒を分かれた桁カードで表示し、1秒ごとに減るカウントダウンにしてください。
21見せ場
シェイプディバイダー
Animated shape divider
セクション下端の波が、途切れずゆらぎ続ける。
AIへの指示例
セクション下端のSVGの波が、途切れずゆらぎ続けるシェイプディバイダーにしてください。
22見せ場
いいねアニメーション
Like button animation
ハートが赤く塗り、弾んで、小さな粒が散る。
クリックして試す
AIへの指示例
いいねでハートが赤く塗り、一度大きく弾んで戻り、小さな粒が放射状に散って消えるようにしてください。
23見せ場
スクロールダウンの合図
Scroll-down cue
SCROLLの文字と、縦に流れ続ける点。
AIへの指示例
SCROLLのラベルと縦の軌跡を置き、点が上から下へ繰り返し流れるスクロールの合図にしてください。
24見せ場
背景動画
Background video
ループする映像の上に、中央の見出しを置く。
AIへの指示例
画面を覆うループ映像（音声なし、object-fit: cover）の上に、中央揃えの見出しを重ねてください。