【jQuery】もっとアニメーションで遊んでみる(その２)

2020年12月13日jQuery

はじめに

前回の続きです。頭と体だけだとかわいそうなので手と足もつけてあげましょう。

できた

See the Pen
zYKNNZa by AtsushiNakata (@nakata999)
on CodePen.

これで自由に歩き回ることができますね。心なしか、前回より表情が和らいでいるようにも見えます。

簡単に説明

頭・体・左腕・右腕・左足・右足の６つのパーツに分けて、それぞれを独立させて動かしています。

/***** 頭 *****/
head.css("transform","rotate(" + (headCnt*0.1) +"deg)");
    
if (headCnt == 5) {
  headFlag = 1;
} else if (headCnt == -5) {
  headFlag = 0;
}
    
if (headFlag == 1) {
  headCnt--;
} else if (headFlag == 0) {
  headCnt++;
}  

各パーツともやっていることは同じです。フラグでカウンタの増減を制御して、"transform"のプロパティに設定しているだけ。

あとがき

なかなかカワイイものが出来上がりましたね。あとは彼をキーボード入力で動かせるようにしたい。

おしゃれ度

★★☆☆☆