タグ: ui
-
#52 UIアニメーション設計のアンチパターン大全｜やってはいけない実装と改善方法
UIアニメーションは「動けばOK」ではありません。 こういった問題の多くは、アンチパターン（悪い設計）が原因です。 この記事では、実際によくあるミスをベースに の形で整理していきます。 ① 状態を持た…
-
Scroll Smoothing UI（Inertiaの基礎）
1.Scroll Smoothing UIとは？ スクロールの値（scrollY）をそのまま使うと、動きは正確ですが少し硬く感じます。 そこで使うのが Scroll Smoothing&nb…
-
バネのような動きを作る Spring Animation UI【JavaScript】
UIの動きを「なんとなく滑らか」にするだけなら、easing や lerp で十分です。 ですが、 と感じることはありませんか？ その原因はシンプルで、👉 “速度”が存在していないからです。
-
Magnetic Button UI（カーソルに引き寄せられるインタラクション）
1.Magnetic Button UIとは カーソルが近づくと、ボタンが「吸い付く」ように動くインタラクションです。 単なるホバー演出ではなく、「操作している感触」を作るUIです。 このような動きは…
-
Swipe Gesture UI（カードをスワイプして操作するUI）
スマホアプリでは当たり前になっている「スワイプ操作」。 カードを左右に動かして「YES / NO」や「削除 / 保存」などを直感的に選択できるUIです。 今回はこのスワイプUIを、JavaScript…
-
Drag Interaction UI（ドラッグ操作UIの作り方）
1.Drag Interaction UIとは ドラッグ操作は、単なるイベント処理ではなく「入力設計」と「状態管理」が重要になります。先に理解しておくと、実装がかなりスムーズになります。 ドラッグ操作…
-
ページ遷移をアニメーション化する方法【View Transition API UI】
これまでスクロールに応じたUIを多く作ってきましたが、今回は少し視点を変えて、 👉 「ページ遷移そのもの」をアニメーション化するUI を扱います。 クリック → 別ページ表示という“途切れた…
-
スクロール方向で変わるUIの作り方【Scroll Direction UI】
🧭 Scroll Animationシリーズ 👉 今回はここから一歩進んで「スクロール方向」に反応するUIを作ります 1.Scroll Direction UIとは？ 通常のScroll UIは で制…
-
Scroll Timeline UIの作り方【JavaScriptで進行がわかるUIを実装】
スクロールに合わせて「今どこを読んでいるか」がわかるUIは、記事ページやLP、ステップ解説でよく使われます。 今回は、縦に並んだセクションに対して、タイムラインの進行が伸びていく Scroll Tim…
-
スクロール位置に応じてナビをハイライトする Scroll Spy UI の作り方
長いページで「今どこを読んでいるのか分かるUI」見たことありませんか？ こういったUIでは、スクロールに応じてナビゲーションが自動で切り替わります。 これが Scroll Spy UI&nb…