今回の Loader は、ちょっと異色な感じのモノを作ってみました。
どこかで見たことあるけど、どこで使われているか思い出せないようなローダーです。
まるで、太陽の周りをぐるぐる回る地球や、水星などのような銀河系・・・みたいなイメージとでも思ってくれるといいんですが、名前を「Orbit Ring」という、周辺の軌道をぐるぐる回るという意味でつけてみました。
Webサイトが、サイバーチックな場合に、いい感じにマッチすると思うんですよね。
デモ
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Orbit Flow Loader</title>
</head>
<body>
<div class="loader">
<div class="planet"></div>
<div class="orbit"></div>
<div class="satellite-wrap s1">
<div class="satellite"></div>
</div>
<div class="satellite-wrap s2">
<div class="satellite"></div>
</div>
<div class="satellite-wrap s3">
<div class="satellite"></div>
</div>
</div>
</body>
</html>
style.css
{
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #020617;
}
/* 全体 */
.loader {
position: relative;
width: 160px;
height: 160px;
}
/* 中央の惑星 */
.planet {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
background: #38bdf8;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 15px #38bdf8;
}
/* 軌道リング */
.orbit {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.08);
}
/* 回転用ラッパー */
.satellite-wrap {
position: absolute;
inset: 0;
animation: spin linear infinite;
transform-origin: center;
}
/* 衛星 */
.satellite {
position: absolute;
top: 0;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
transform: translateX(-50%);
}
/* 個別設定 */
.s1 {
animation-duration: 2s;
}
.s1 .satellite {
background: #38bdf8;
}
.s2 {
animation-duration: 3s;
animation-direction: reverse;
}
.s2 .satellite {
background: #6366f1;
}
.s3 {
animation-duration: 4s;
}
.s3 .satellite {
background: #ec4899;
}
/* 回転 */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
コード解説
中心の丸と、周回する衛星エレメントは、それぞれ、実態DOMで構築しています。
今回は、擬似要素は使っていませんが、衛星が２個までであれば、擬似要素を使うやり方も構築できるかもしれませんね。
逆に、４つ以上みたいなパターンも作りやすくなるので、より複雑な見た目にすることも可能です。
ポイントは、周回する時間と中心からのサイズで、なるべく、同じ軌道にならないように、それぞれをちょっとずらすというのがずっとみていられるアニメーションを作るポイントですね。
あとがき
やっぱり、こういうアニメーションを見ていると、宇宙のイメージが湧いてくるのは、自分だけでしょうか？
丸の部分を、アイコン的な画像にすると、色々なストーリーが作れて、面白い表現ができるかもしれませんね。
今回は、3個の衛星軌道で、中心から同じ距離での周回アニメーションをしていますが、画面のサイズに応じて、距離を変えてみるとまた違った印象になるので、ホームページの印象に合わせて、組み替えて遊んでみてください。
CSSのレンダリング性能は、非常に優れているので、ページいっぱいの動きなどをつけても楽しくなるかもしれませんね。
0 件のコメント:
コメントを投稿