【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度回転させたからといって、本当にそこにあるワケじゃないんですね。説明ヘタか…。
あとがき
かなり悩みました。でも無理矢理とはいえ、できた時の達成感はなかなかのもの。こんなに頑張ったんだから史上初の「★3つ」がもらえるんじゃないでしょうか😀今回は以上です。ありがとうございました。
おしゃれ度
★★☆☆☆
ディスカッション
コメント一覧
まだ、コメントがありません