投稿者: Idle Interface
-
#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モーションを“設計として整理する考え方…
-
Momentum Drag UIの作り方（慣性スクロールをJavaScriptで再現）
ドラッグを離したあと、スーッと動き続けるUIを見たことはありませんか？ iOSのスクロールやカードUIなどでよく使われている「慣性（Momentum）」です。 この記事では、JavaScriptでこの…