今回は、画像を中心に配置してその周りを
テキストが回転してるデザインを実装してみました。
この方法は、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>
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;
}
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)');
});
コメント