ブログ
-
気持ちいい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 は、ただ値を一気に切り替…
-
実践構築（統合）すべてをつなぐ「最小システムアーキテクチャ」
← Prev Next → ここまでで、私たちはたくさんの部品を作ってきました。 でも一番大事なのはこれです。 どうやって全部をつなぐの？ 今回はそれをやります。 難しくしません。最小構成で「動く構造…
-
Event設計とは？状態とシーンを“ゆるく”つなぐ仕組み
← Prev Next → これまでに、 まで進んできました。 ここまで来ると、こう感じませんか？ 「クラス同士が、直接つながりすぎている…？」 そこで登場するのが Event設計（イベント…