メインビジュアルなど、ファーストビューで文字がクルクル回るパーツを見かけます。
今回はそのパーツを作ってみます。
◆まずはデモページをご覧ください。
デモページを見る
メインビジュアルの右側にパーツが乗っていますね。
下記コードに簡単な解説を入れていますが、コピペしてもらい、文字やアイコンを変えてもらえればと思います。
HTML
<div class="wrap">
<div class="circle_container">
<svg class="text_circle" viewBox="0 0 500 500">
<title>dog</title>
<defs><path id="text_circle" d="M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"/></defs>
<text><textPath xlink:href="#text_circle">dog dog dog dog dog dog dog dog</textPath></text>
</svg>
<img src="img/dog.png" class="icon_img">
</div>
</div>
<div class="circle_container">
<svg class="text_circle" viewBox="0 0 500 500">
<title>dog</title>
<defs><path id="text_circle" d="M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"/></defs>
<text><textPath xlink:href="#text_circle">dog dog dog dog dog dog dog dog</textPath></text>
</svg>
<img src="img/dog.png" class="icon_img">
</div>
</div>
CSS
.wrap {
position: relative;
width: 100%;
min-height: 600px;
background-size: cover;
background: url("../img/image.jpg") no-repeat center;
overflow: hidden;
}
position: relative;
width: 100%;
min-height: 600px;
background-size: cover;
background: url("../img/image.jpg") no-repeat center;
overflow: hidden;
}
.circle_container {
position: absolute;
right: 15%;
bottom: 0;
}
.text_circle {
width: 300px;/*文字サークルの大きさ*/
animation: rotateIt 10s linear infinite;/*文字サークルの回転の速さ*/
}
@keyframes rotateIt {
to {
transform: rotate(-360deg);
}
}
.text_circle text {
font-size: 1.2rem;
text-transform: uppercase;/*すべての文字を大文字に*/
fill: #000;/*文字の色*/
}
.text_circle textPath {
letter-spacing: 17px;/*文字の余白*/
}
.icon_img {
position: absolute;
width: 60px;
height: 60px;
top: calc(50% - 30px);
left: calc(50% - 30px);
}
サイトを開いたときに、こういった動くパーツが見えると、印章に残るのではと思います。