ログイン

問題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¥
            

期待する画面

ログインして解答を見る
コードのアイコン

解答ソースコード

              $(function () {
  var num=20;
  for(var i=0;i<num;i++){ 
    $(".box").append("<span></span>");
    var angle=Math.PI*(2/num)*i,
          rotateAngle=360*i/num,
          moveX=50*Math.sin(angle)+"px",
          moveY=50*(1-Math.cos(angle))+"px",
          move="translate("+moveX+","+moveY+") "+" rotate("+rotateAngle+"deg)";
    $(".box span").eq(i).css({
      "transform":move,
    });
  }
});
¥JavaScript¥
            
答えのアイコン

解説

どうでしたでしょうか。今回は少し難しかったかと思います。少し数学の知識が必要になります。まずsinとcosをMathで使うときはrad表記しないといけないので、angleではMath.PIを使ってiの値によって角度が変化するようにしています。そしてrotateAngleとして別にrotate用の角度を360度表記でわざわざ作っていますが、もっとスマートにやる方法はあると思います。そしてここから数学の話ですが、半径*sinでx軸方向の移動距離、半径*cosでy軸方向の移動距離が導けるのでそれをeq(i)によってそれぞれのspanにmoveにまとめて与えてあげています。

何においてもそうなのですが、正解はありません。別解は山ほどあると思うので、自分で同じようなものを作ってみても面白いと思います。次回はこのマークに動きをつけて行きたいと思います。
完了にする!
LINEの友達追加でお役立ち動画をGET!!