タグ: ui animation
-
Scroll + Drag Hybrid UI：スクロールとドラッグをつなぐインタラクション設計
Web UIでは、スクロールで動く表現と、ドラッグで操作する表現は別々に扱われることが多いです。 スクロール系の基本は、Scroll Trigger Animation や Scroll Progre…
-
慣性スクロールUIの作り方（スワイプ後に“スーッと止まる動き”）【Inertia Scroll UI】
スマホでリストをスクロールしたとき、指を離しても「スーッ」と動き続けますよね。 あの気持ちいい動きは、ただのスクロールではなく“慣性（Inertia）”で動いています。 この記事ではこの動きを、Jav…
-
スクロールを状態として扱うUI設計【Scroll-Driven State UI】
スクロール連動UIを作るとき、scrollイベントのたびに「今どこまで来たか」を判定して、要素を動かしたくなることがあります。 たとえば、プログレスバーを伸ばしたり、見出しの色を変えたり、カードを少し…
-
スクロール速度で変わるUIの作り方【JavaScriptで気持ちいい演出を実装】
スクロール連動UIというと、要素がフェードしたり、少し動いたりする実装を思い浮かべることが多いです。ただ、実際のUIでは「どこまでスクロールしたか」だけでなく、どのくらいの速さでスクロールされたかによ…
-
Scroll Trigger Animationの作り方|スクロール位置で要素をふわっと表示する基本実装【JavaScript】
スクロールに合わせて要素がふわっと現れる演出は、記事一覧、特徴紹介、料金表、FAQ など、いろいろなUIで使われます。ただし、勢いで実装すると「毎フレーム scroll を監視して重くなる」「一度表示…
-
Parallax Scroll Animationの作り方｜スクロールで奥行きを出すUIをJavaScriptで実装
スクロールに応じたアニメーションは、UIに自然な動きを加える重要なパターンです。まずは基本的なスクロール連動の考え方から知りたい方は、こちらも参考にしてください。→ Scroll Progress A…
-
Scroll Snap Animationで気持ちよく止まるUIを作る方法【CSS中心で実装】
スクロールしたときに、要素が中途半端な位置で止まらず、ぴたっと揃うUIを見たことはないでしょうか。 たとえば、 スクロール量そのものを視覚化したい場合は、あわせて Scroll Progress の実…
-
ボタンの気持ちいいクリックアニメーションの作り方【JavaScript / UI Feedback】
1.Button Interaction Animation UIアニメーションの基礎については、以下の記事もおすすめです。 ユーザーがボタンを押したとき、何も反応がないUIは不安になります。 逆に、…
-
スムーズなプログレスバーの作り方【JavaScript】
progress / lerp / easing を使って、気持ちよく伸びるUIを作る 読み込み中、達成率の表示、レベルゲージ、アップロード進行状況など、プログレスバーはさまざまなUIで使われます。 …