問題
9
jQueryAnimation
ローディングマークの作り方
jQueryAnimationの問題に挑戦しよう！
問題
「ローディングマークの作り方」
今回はよく見かけるローディングマークをjqueryを使って作ってみましょう！
ローディングマークの半径は50px、ローディングの要素は20個で作っています（ここは自由に決めてもらっていいです）。
あらかじめエディタに書くコード
<div class="box"></div>
¥HTML¥
.box{
position: relative;
width: 300px;
height: 300px;
}
.box span{
position: absolute;
top: 50px;
left: 100px;
width: 5px;
height: 15px;
border-radius: 5px;
background-color: black;
}
¥CSS¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
どうでしたでしょうか。今回は少し難しかったかと思います。少し数学の知識が必要になります。まずsinとcosをMathで使うときはrad表記しないといけないので、angleではMath.PIを使ってiの値によって角度が変化するようにしています。そしてrotateAngleとして別にrotate用の角度を360度表記でわざわざ作っていますが、もっとスマートにやる方法はあると思います。そしてここから数学の話ですが、半径*sinでx軸方向の移動距離、半径*cosでy軸方向の移動距離が導けるのでそれをeq(i)によってそれぞれのspanにmoveにまとめて与えてあげています。
何においてもそうなのですが、正解はありません。別解は山ほどあると思うので、自分で同じようなものを作ってみても面白いと思います。次回はこのマークに動きをつけて行きたいと思います。
