Javascript, jQueryを使用しアニメーションを実装いたしました。
URL
担当・作業時間
企画・デザイン（1時間）・コーディング（6時間）
使用ソフト
Visual Studio Code
仕様
PC (1920px×1080px)
操作説明
- COMEをワンクリック：
人が増えます。 - COMEをダブルクリック：
人が増えます。 - CHANGEをワンクリック：
衣装が変わります。 - CHANGEをダブルクリック：
衣装が戻ります。 - イラストをワンクリック：
その人が動きます。 - GROVEをワンクリック：
全員が動きます。 - CLAPをダブルクリック：
紙吹雪がランダムな大きさで出ます。 - CLAPで任意のキーを押す：
黄色の紙吹雪が星形で出ます。
コーディングについて
様々な動きが出来るよう単純な命令ですが幅を持たせて実装致しました。
一つのボタンに対して2つ以上の動作を実装することで、ボタンの数を減らし煩雑性を軽減させつつもバラエティ感を出しています。
基本的にはワンクリックもしくはダブルクリックで直感的に理解出来るように意識していますが、紙吹雪のみダブルクリックとキーアクションで差別化しています。
ワンクリックとダブルクリックもしくはキーアクションにしてしまうと紙吹雪が同時に出てしまうので、クリック後の効果を使い分けられるように致しました。