【jQuery】サイコロみたいな四角を転がすアニメーション

jQuery

長い戦いが始まる

はじめに

四角いサイコロみたいなのがコロコロ転がるアニメーションを作りたいと思いました。CSSの"transform"使えばサクッとできてしまうでしょう。

できない

できませんね。回転させながら横方向に移動させるとなると、これがなかなか手強い。ここはjQueryでの力技でやってみましょう。

できた

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

これは頑張りましたよ。CSSの方は特に変わったことはしていません。サイズとか位置決めしてるだけです。唯一のポイントは"transform-origin"で回転軸の位置を決めてる所でしょうか。

p {
  (略)
  transform-origin: 100% 100%;
}

jQueryの解説

//「ザ」を四角の中央に配置
elemS.css("left",elemP.width()/2 - elemS.width()/2);
elemS.css("top",elemP.height()/2 - elemS.height()/2);

↑なぜコレをjQueryで書くのか。CSSで"left"とか"top"とか"transform"で位置決めすればいいじゃんって言われそうですが、jQueryの中でも"transform"を使いたかったからなんです。"transform"って2回書くと後から書いたヤツしか効かないみたい。そして、コレを"setInterval"の中に書くことでウィンドウサイズが変わっても「ザ」の位置がずれないようにしています。

//90度回転したら…
if(cntP == 90){
  //角度を0度に戻す
  cntP = 0;
  //横方向への移動量を増やす
  moveX+= 100;
  //「ザ」を90度回転させる
  cntS+=90;
  elemS.css("transform","rotate(" + cntS + "deg)");
}

//四角を初期位置からmoveX分だけ右、cntP分だけ回転させる
elemP.css("transform","translateX(" + moveX + "%) rotate(" + cntP + "deg)");

いろいろ試したんですけど『①右下を軸にして90度回転』『②90度回転したら0度に戻す』『③四角を横にずらして文字を90度回転させる』これの繰り返しでしか実現できませんでした。"transform"で回転や移動をさせても、それは「四角が本来あるべき位置」からの回転や移動なので、"rotate(90deg)"で90度回転させたからといって、本当にそこにあるワケじゃないんですね。説明ヘタか…。

あとがき

かなり悩みました。でも無理矢理とはいえ、できた時の達成感はなかなかのもの。こんなに頑張ったんだから史上初の「★３つ」がもらえるんじゃないでしょうか😀今回は以上です。ありがとうございました。

おしゃれ度

★★☆☆☆

Posted by ナカタ