▲TOPへ戻る

【javascript】文字を円形の画像の周りに配置する方法

文字を円形に配置
目次

    やりたいこと

    前回は、文字列を取得し、一文字ずつ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. 画像と文字を要素の中心に配置
    2. 1文字ずつspanに挿入する。
    3. transform-origin: 0 xxpx;を設定する。
      xxは画像サイズ、文字数により調整する。
    4. アニメーションで360°回転させ、エンドレス(infinite)にする。
    5. spanの傾きは、(360/文字数)で計算し、あとは微調整

    profile

    パソコン好きなガオ

    コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

    パソコン

    javascript

    カメラ

    ブログ