タグ: JavaScript
-
Scroll Progressバーの作り方【JavaScriptでスクロール進捗を見せるUI】
→ easingやスクロールに関係する基礎はこちら#03 easing / cubic-bezier#18 Progress Bar Animation ページを読んでいるとき、上部に細いバーが伸びて…
-
カードを順番に表示する「Stagger Animation」の作り方【CSS / JavaScript】
一覧UIでカードが一気に表示されると、少し味気ない印象になります。 そこで使われるのが Stagger Animation（スタッガーアニメーション） です。 要素を「少しずつ時間…
-
クリック位置から広がる Ripple エフェクトの作り方【JavaScript / UIフィードバック】
UIのクリックフィードバックとしてよく使われるのがRipple（波紋）エフェクトです。 Material Design などでも採用されており、クリックした場所から円が広がることで という …
-
ボタンの気持ちいいクリックアニメーションの作り方【JavaScript / UI Feedback】
1.Button Interaction Animation UIアニメーションの基礎については、以下の記事もおすすめです。 ユーザーがボタンを押したとき、何も反応がないUIは不安になります。 逆に、…
-
JavaScriptで数値カウントアップUIを作る方法【Number Animation入門】
1. はじめに 「0 から 1000 まで数字が増えていく表示」を見たことがあると思います。たとえば、以下のようなUIです。 こうした 数値が変化するUI は、ただ値を一気に切り替…
-
Event設計とは？状態とシーンを“ゆるく”つなぐ仕組み
← Prev Next → これまでに、 まで進んできました。 ここまで来ると、こう感じませんか？ 「クラス同士が、直接つながりすぎている…？」 そこで登場するのが Event設計（イベント…
-
Scene管理の進化｜JavaScriptで設計する画面構造の拡張
← Prev Next → 画面が増えたとき、コードはどう設計する？ ここまでで私たちは、 まで作ってきました。 でも、ここで必ず出てくる問題があります。 「タイトル画面とゲーム画面って、どうやって切…
-
Input設計とは？ループと状態に統合する入力管理の基本構造
← Prev Next → これまでの流れ： そして今回。 「ユーザーの操作を、どうやってゲーム側に伝えるのか？」 ここを設計します。 ❌ よくある初心者パターン 一見問題なさそうですが、これには大き…
-
Canvasで完成させるゲームループ設計｜Fixed Time Stepと描画統合
← Prev Next → 1.JavaScriptアニメーションを「本格描画」に進化させる これまでの記事で、 までやりました。 ここまでで実はもう「ゲームループの骨格」は完成しています。 今回はそ…
-
Interpolation（補間）とは？Fixed Time Stepを滑らかにする最重要技術
← Prev Next → 1.Fixed Time Stepを滑らかに見せる最後のピース #09 Fixed Time Step の記事で Fixed Time Step を導入しました。 ここで問…