投稿者: Idle Interface
-
スクロールを状態として扱う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では「どこまでスクロールしたか」だけでなく、どのくらいの速さでスクロールされたかによ…
-
Scroll State Machine UIの作り方｜スクロール演出を状態管理で整理する方法
Scroll Story UIやStickyセクションを作っていると、最初はシンプルでも、あとから「文章を増やしたい」「表示パターンを追加したい」「切り替え条件を調整したい」となって、コードが一気に複…
-
Scroll Story UIの作り方｜スクロール連動で内容が切り替わるUI
スクロールに合わせて、左のビジュアルや説明が切り替わるUIを見かけることがあります。プロダクト紹介、機能説明、サービスLPなどでよく使われる見せ方です。 このUIは、ただ派手なだけではありません。「ユ…
-
スクロールに追従するUIの作り方（Sticky Animation）
スクロールしているのに、要素そのものは画面内に留まり続ける。そんな「Sticky UI」は、説明型のレイアウトやストーリー型の見せ方と相性が良いパターンです。 たとえば次のような場面でよく使われます。…
-
Scroll Trigger Animationの作り方|スクロール位置で要素をふわっと表示する基本実装【JavaScript】
スクロールに合わせて要素がふわっと現れる演出は、記事一覧、特徴紹介、料金表、FAQ など、いろいろなUIで使われます。ただし、勢いで実装すると「毎フレーム scroll を監視して重くなる」「一度表示…
-
Parallax Scroll Animationの作り方｜スクロールで奥行きを出すUIをJavaScriptで実装
スクロールに応じたアニメーションは、UIに自然な動きを加える重要なパターンです。まずは基本的なスクロール連動の考え方から知りたい方は、こちらも参考にしてください。→ Scroll Progress A…