タグ: scroll
-
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…
-
スクロールで出現するフローティングボタンの作り方【Floating Action Button UI】
画面右下にふわっと現れる丸いボタン。モバイルUIではよく見かけるパターンです。 この記事では、 をまとめて実装します。 1.実装コード HTML CSS JavaScript 2.ポイント解説 ① ス…
-
スクロール方向で変わる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…
-
Scroll Story UIの作り方｜スクロール連動で内容が切り替わるUI
スクロールに合わせて、左のビジュアルや説明が切り替わるUIを見かけることがあります。プロダクト紹介、機能説明、サービスLPなどでよく使われる見せ方です。 このUIは、ただ派手なだけではありません。「ユ…
-
スクロールに追従するUIの作り方（Sticky Animation）
スクロールしているのに、要素そのものは画面内に留まり続ける。そんな「Sticky UI」は、説明型のレイアウトやストーリー型の見せ方と相性が良いパターンです。 たとえば次のような場面でよく使われます。
-
Scroll Progressバーの作り方【JavaScriptでスクロール進捗を見せるUI】
→ easingやスクロールに関係する基礎はこちら#03 easing / cubic-bezier#18 Progress Bar Animation ページを読んでいるとき、上部に細いバーが伸びて…