カテゴリー: 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.
-
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…
-
スクロールと時間を組み合わせるUI設計【Scroll × Time UI】
スクロール連動UIは、「スクロール量に応じて変化する」ものとして作ることが多いです。 たとえば、 といった表現です。 ただ、この方法だけだと、スクロールが止まった瞬間にすべての動きも止まるという特徴が…
-
スクロールを状態として扱うUI設計【Scroll-Driven State UI】
スクロール連動UIを作るとき、scrollイベントのたびに「今どこまで来たか」を判定して、要素を動かしたくなることがあります。 たとえば、プログレスバーを伸ばしたり、見出しの色を変えたり、カードを少し…
-
Scroll Sync UI の作り方【JavaScriptで作る連動スクロールUI】
スクロールに合わせて、画像やテキストの内容が切り替わるUIを見たことはないでしょうか。 たとえば、左側にビジュアルを固定して、右側の文章をスクロールすると、表示内容が連動して変わるようなレイアウトです…
-
スクロール位置に応じてナビをハイライトする Scroll Spy UI の作り方
長いページで「今どこを読んでいるのか分かるUI」見たことありませんか？ こういったUIでは、スクロールに応じてナビゲーションが自動で切り替わります。 これが Scroll Spy UI&nb…
-
スクロール＋マウス連動UIの作り方【スマホでも破綻しない設計】
スクロールに合わせて要素が少し動くだけでも、UIの印象はかなり変わります。さらにPCではマウス位置に合わせてわずかに動きを足すと、画面に奥行きや気持ちよさが出ます。 ただし、ここで注意したいのがマウス…
-
スクロール速度で変わるUIの作り方【JavaScriptで気持ちいい演出を実装】
スクロール連動UIというと、要素がフェードしたり、少し動いたりする実装を思い浮かべることが多いです。ただ、実際のUIでは「どこまでスクロールしたか」だけでなく、どのくらいの速さでスクロールされたかによ…