くるくる回るアニメーション
See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.
HTML の 子要素に JQuery で span を追加して CSS animation で動かします
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS
.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;
opacity: .3;
animation: loading infinite;
}
@keyframes loading{
0%{opacity: 0.3;}
30%{opacity: 1;}
60%{opacity: 0.3;}
}JQuery
$(function(){
let num = 20;
for(let i=0; i<num; i++){
$(".box").append("<span></span>");
let 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,
});
for(let i=0; i<num; i++){
$(".box span").eq(i).css({
"animation-duration":num/20+"s",
"animation-delay":i/20+"s"
});
}
}
});解説
CSS
- .box に position: relative; と width + height で animation を動かす枠を作ります
- .box span で span に CSS を当て、ドットを作成
- @keyframes で ドットが濃くなる CSS animation を設定
JQuery
- let num = ドットの個数を入力
- for を使い num で設定したドットの個数分の処理を繰り返す
- $(“.box”).append(“<span></span>”); = .box の直下に span を作ります
- let で変数を作ります。5行あります。詳細は下記参照。
- .box span の中から .eq( i ) i番目の要素に .css({ transform: 変数move;}) を付与する
- for でループを行う、animation-duration(何秒かけてアニメーションを行うか)、animation-delay(アニメーションの開始までを遅延させる)の CSS を、全てのドットに少しずつずれるように付与する
変数解説
- angle = ドットが綺麗に円になるようにする値
- rotateAngle = ドットを傾ける値
- moveX , moveY = ドットの配置をX方向とY方向で指定する値、angle の値を使用
- move = CSS として .box span に付与する値。translate に moveX と moveY を使用。 ratate に ratateAngle を使用。
