カテゴリー: 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.
-
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…
-
Scroll Snap Animationで気持ちよく止まるUIを作る方法【CSS中心で実装】
スクロールしたときに、要素が中途半端な位置で止まらず、ぴたっと揃うUIを見たことはないでしょうか。 たとえば、 スクロール量そのものを視覚化したい場合は、あわせて Scroll Progress の実…
-
Scroll Progressバーの作り方【JavaScriptでスクロール進捗を見せるUI】
→ easingやスクロールに関係する基礎はこちら#03 easing / cubic-bezier#18 Progress Bar Animation ページを読んでいるとき、上部に細いバーが伸びて…
-
スクロールでふわっと表示するUIの作り方【Scroll Reveal Animation】
ページをスクロールしたときに、要素が「ふわっ」と現れるUIを見たことはありませんか？ これは Scroll Reveal Animation と呼ばれ、視線誘導や没入感を高めるのに…
-
カードを順番に表示する「Stagger Animation」の作り方【CSS / JavaScript】
一覧UIでカードが一気に表示されると、少し味気ない印象になります。 そこで使われるのが Stagger Animation（スタッガーアニメーション） です。 要素を「少しずつ時間…
-
Skeleton Loaderの作り方｜ローディング体験を改善するUIパターン
1.Skeleton Loaderとは Webサイトやアプリでデータを読み込むとき、何も表示されないとユーザーは「止まっているのでは？」と感じてしまいます。 そこでよく使われるのが Skel…