jQueryAnimation
Googleでログイン
問題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を与えます。
ログインして解答を見る
完了にする！
活動記録をTweetする
