個人制作
Cat vs Frog
Cat vs Frog
Interactive Animation
- 概要
-
クリック操作でキャラクターが動くインタラクションアニメーション。
- 担当内容
- 企画 / デザイン / コーディング
※ビジュアル素材はフリー素材を使用 - 制作期間
- 2日
- 技術
- HTML / CSS / jQuery
設計
jQueryのアニメーション制御を使い、 状態遷移をシンプルに構築しています。
- animate() による動作制御
- delay() によるタイミング制御
- queue() による連続処理
工夫した点
- アニメーションが重ならないよう順序制御を設計
- 操作レスポンスを優先し遅延を最小化
- CSSとjQueryを役割分担して軽量化
実装
DOM操作とアニメーション制御を中心に構築し、 シンプルな構造で動作するよう設計しています。