カテゴリー: UI Motion Patterns
UI motion patterns are small animations that improve user interaction and feedback.
In this category you will find practical JavaScript UI animations such as hover effects, button click feedback, progress indicators, and number counters.
Each article includes interactive demos and step-by-step explanations.
-
#52 UIアニメーション設計のアンチパターン大全｜やってはいけない実装と改善方法
UIアニメーションは「動けばOK」ではありません。 こういった問題の多くは、アンチパターン（悪い設計）が原因です。 この記事では、実際によくあるミスをベースに の形で整理していきます。 ① 状態を持た…
-
Scroll + Drag Hybrid UI：スクロールとドラッグをつなぐインタラクション設計
Web UIでは、スクロールで動く表現と、ドラッグで操作する表現は別々に扱われることが多いです。 スクロール系の基本は、Scroll Trigger Animation や Scroll Progre…
-
Scroll Smoothing UI（Inertiaの基礎）
1.Scroll Smoothing UIとは？ スクロールの値（scrollY）をそのまま使うと、動きは正確ですが少し硬く感じます。 そこで使うのが Scroll Smoothing&nb…
-
慣性スクロールUIの作り方（スワイプ後に“スーッと止まる動き”）【Inertia Scroll UI】
スマホでリストをスクロールしたとき、指を離しても「スーッ」と動き続けますよね。 あの気持ちいい動きは、ただのスクロールではなく“慣性（Inertia）”で動いています。 この記事ではこの動きを、Jav…
-
バネのような動きを作る Spring Animation UI【JavaScript】
UIの動きを「なんとなく滑らか」にするだけなら、easing や lerp で十分です。 ですが、 と感じることはありませんか？ その原因はシンプルで、👉 “速度”が存在していないからです。
-
lerpでなめらかに追従するUIを作る方法【JavaScript】
1.lerpでなめらかに追従するUIを作る方法 UIアニメーションを作っていると、「目的地まで一瞬で移動するのではなく、少し遅れてなめらかに追いかけてほしい」と感じる場面があります。 たとえば、カーソ…
-
Magnetic Button UI（カーソルに引き寄せられるインタラクション）
1.Magnetic Button UIとは カーソルが近づくと、ボタンが「吸い付く」ように動くインタラクションです。 単なるホバー演出ではなく、「操作している感触」を作るUIです。 このような動きは…
-
スクロールで出現するフローティングボタンの作り方【Floating Action Button UI】
画面右下にふわっと現れる丸いボタン。モバイルUIではよく見かけるパターンです。 この記事では、 をまとめて実装します。 1.実装コード HTML CSS JavaScript 2.ポイント解説 ① ス…
-
UIモーション設計の考え方｜バラバラ実装を卒業する
UIアニメーションを作っていると、こんな状態になりませんか？ 👉 全部バラバラ これだと、後から追加・修正がどんどんつらくなります。 この記事では、UIモーションを“設計として整理する考え方…
-
Swipe Gesture UI（カードをスワイプして操作するUI）
スマホアプリでは当たり前になっている「スワイプ操作」。 カードを左右に動かして「YES / NO」や「削除 / 保存」などを直感的に選択できるUIです。 今回はこのスワイプUIを、JavaScript…