やりたいこと
前回は、文字列を取得し、一文字ずつspanタグ に挿入する方法を紹介しました。
今回は、以下のように、画像の周囲に文字を配置し、アニメーションさせる方法を紹介します。
HTML
divタグの中に 画像と文字を設置
<div class="content">
<img src="../img/nana.png" alt="nana">
<div class="text">- ナナちゃんとアヒル -- nana & duck -</div>
</div>CSS
ポイントななるCSSだけ紹介します。
img{
position: absolute; /* 画像を中心に配置 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px; /* 調整してください */
border-radius: 50%; /* 画像を円に */
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.2rem; /* 調整してください */
animation: animate 15s linear infinite;
}
/* アニメーションさせる */
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.text span {
position: absolute;
top: -100px; /* この数字(100px)をtransform-originのY軸と同じにする */
transform-origin: 0 100px; /* この数字(100px)をtopと同じにする */
}javaScript
javaScriptはたったの7行です。
"rotate(" + i * 16 + "deg)"
16
という数字は、360/文字数
で、あとは微調整してください。
const text = document.querySelector(".text");
text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");
const element = document.querySelectorAll("span");
for (let i = 0; i < element.length; i++) {
element[i].style.transform = "rotate(" + i * 16 + "deg)";
}
まとめ
- 画像と文字を要素の中心に配置
- 1文字ずつspanに挿入する。
- transform-origin: 0 xxpx;を設定する。
xxは画像サイズ、文字数により調整する。 - アニメーションで360°回転させ、エンドレス（infinite）にする。
- spanの傾きは、（360/文字数）で計算し、あとは微調整
