ログイン
問題1

ローディングマークに動きをつけよう

アイコン画像

問題1:ローディングマークに動きをつけよう

今回は前回作ったローディングマークに動きをつけていきましょう!
”ローディングマークを作ろう”をやっていない方は是非やってみてください

エディターのアイコンあらかじめエディタに書くコード

                <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;
    var rotateAngle=360*i/num;
    var moveX=50*Math.sin(angle)+"px";
    var moveY=50*(1-Math.cos(angle))+"px";
    var move="translate("+moveX+","+moveY+") "+"rotate("+rotateAngle+"deg)";
    $(".box span").eq(i).css("transform":move);
});
¥JavaScript¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              .box span{
  opacity: .3;
  animation: loading infinite;
}
@keyframes loading {
  0%{opacity:.3} 30%{opacity:1} 60%{opacity:.3}
}
¥CSS¥
            
              $(function () {
  <!-- ~ ここにその9の解答が入ります ~ -->
  for(var i=0;i<num;i++){
    $(".box span").eq(i).css({
      "animation-duration":num/20+"s",
      "animation-delay":i/20+"s"
    });
  }
});
¥JavaScript¥
            

コメントのアイコン解説

まずkeyframesでcssにローディングのためのアニメーションを用意し、spanにopacityとanimationを与えておきます。そしてeqとforを使ってそれぞれのspanにanimation-durationとanimation-delayを与えます。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる