投稿者: Idle Interface
-
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…
-
スクロールと時間を組み合わせる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ではマウス位置に合わせてわずかに動きを足すと、画面に奥行きや気持ちよさが出ます。 ただし、ここで注意したいのがマウス…