カテゴリー: 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.
-
クリック位置から広がる Ripple エフェクトの作り方【JavaScript / UIフィードバック】
UIのクリックフィードバックとしてよく使われるのがRipple（波紋）エフェクトです。 Material Design などでも採用されており、クリックした場所から円が広がることで という …
-
気持ちいいHover Animationの作り方【UIフィードバックの基本】
1.Hover Animationとは？ Hover Animationとは、マウスカーソルが要素の上に乗ったときに発生するアニメーションです。 ボタンやカードUIなどでよく使われます。 例えば次のよ…
-
ボタンの気持ちいいクリックアニメーションの作り方【JavaScript / UI Feedback】
1.Button Interaction Animation UIアニメーションの基礎については、以下の記事もおすすめです。 ユーザーがボタンを押したとき、何も反応がないUIは不安になります。 逆に、…
-
スムーズなプログレスバーの作り方【JavaScript】
progress / lerp / easing を使って、気持ちよく伸びるUIを作る 読み込み中、達成率の表示、レベルゲージ、アップロード進行状況など、プログレスバーはさまざまなUIで使われます。 …
-
JavaScriptで数値カウントアップUIを作る方法【Number Animation入門】
1. はじめに 「0 から 1000 まで数字が増えていく表示」を見たことがあると思います。たとえば、以下のようなUIです。 こうした 数値が変化するUI は、ただ値を一気に切り替…