画像を中心に文字が周囲を回転（スライド）する設定やってみた【サンプルコードあり】

今回は、画像を中心に配置してその周りを
テキストが回転してるデザインを実装してみました。

この方法は、JavaScriptを使って行う方法と
SVGを使って行う方法があります。

この記事ではJavaScriptを使って下記の実装を
行った方法を書いていきます。

HTMLコードは、画像を指定して
周りに表示したい文字をそのまま書けばＯＫ

JavaScriptを使って文字を分割して配置
指定を行ってサークル状に表示していきます。
文字の回転はanimationを使用してます。

実際に書いたコード
フリーランス案件

実際に書いたコード

HTML

  <body>
    <section>
      <div class="circle">
        <div class="inner"> <!-- 文字配置の基準となる親要素 -->
          <p class="text">inopro55 いのぷろチャンネル コーディング情報 初心者必見</p>
        </div>
        <img src="./img/logo600.png" alt="いのぷろロゴ">
      </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./js/main.js"></script> <!-- ご自身のパスに -->
  </body>

<body>

<p class="text">inopro55 いのぷろチャンネルコーディング情報初心者必見</p>

</div>

</div>

</section>

</body>

CSS

@charset "utf-8";

body {
  font-size: 20px;
}

.circle {
  position: relative;
  margin: 100px auto;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

img{
  width:100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.inner {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: rotateAnim 7s linear infinite;
}

.inner:hover {
  animation-play-state: paused;
}

@keyframes rotateAnim {
  0% { transform: rotate(0deg); }
  50%{ transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

span {
  position: absolute;
  inset: 0;
  font-weight: 700;
}

@charset "utf-8";

body {

font-size: 20px;

}

.circle {

position: relative;

margin: 100px auto;

width: 200px;

height: 200px;

display: flex;

justify-content: center;

align-items: center;

border-radius: 50%;

}

img{

width:100px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.inner {

position: relative;

width: 20px;

height: 20px;

border-radius: 50%;

animation: rotateAnim 7s linear infinite;

}

.inner:hover {

animation-play-state: paused;

}

@keyframes rotateAnim {

0% { transform: rotate(0deg); }

50%{ transform: rotate(180deg); }

100% { transform: rotate(360deg); }

}

span {

position: absolute;

inset: 0;

font-weight: 700;

}

JavaScript

const before = $('.text');
const text = before.text();
const textArray = text.split('');

let after = '';
$.each(textArray,function(index,val){
  after += "<span>" + val + "</span>";
});  

before.html(after);

const textcnt = textArray.length;
const circleR = ($('.circle').height()) / 2;
const fontH = ($('.inner').height());
const dist = circleR - fontH;

$('span').each(function(index) {
  const num = index + 1;
  const radX = Math.sin(360 / textcnt * num * (Math.PI / 180));
  const radY = Math.sin((90 - (360 / textcnt * num)) * (Math.PI / 180));
  $(this).css('transform', 'translate(' + dist * radX + 'px, ' + -(dist * radY) + 'px) rotate(' + 360 / textcnt * num + 'deg)');
});