Wir erstellen einen runder rotierender Kreistext mit HTML, CSS und Javascript
von Eric-Oliver Mächler | Mai 13, 2024 | Design |
Wenn man eine Webseite verbessert oder designt, dann möchte man gewisse Elemente haben die einfach den Leute im Kopf bleiben – dem sag ich dann „einen Anker setzen“. Sowas kann über eine spezielle UX sein oder ein spezielles Element.
Im heutigen Video zeige ich euch wie ihr so ein auffallendes Element designen könnt und zwar in der Form eines Runden Textes das sich dreht – das man dann überall positionieren kann -> zb in der sogenannten Hero Sektion.
Video
HTML
1
2
3
4
5
| <div class="kreis">
<div class="kreistext">
<p>Eric-Oliver Mächler - digitaler Feuermann</p>
</div>
</div> |
<div class="kreis">
<div class="kreistext">
<p>Eric-Oliver Mächler - digitaler Feuermann</p>
</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| .kreis {
position: relative;
width: 200px;
height: 200px;
/*background: red;*/
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.kreistext {
width: 100%;
height: 100%;
position: absolute;
animation: kreisen 10s linear infinite
}
.kreistext span {
position: absolute;
left: 50%;
font-size: 1.2rem;
transform-origin: 0 100px;
}
@keyframes kreisen {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(365deg)
}
} |
.kreis {
position: relative;
width: 200px;
height: 200px;
/*background: red;*/
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}.kreistext {
width: 100%;
height: 100%;
position: absolute;
animation: kreisen 10s linear infinite
}.kreistext span {
position: absolute;
left: 50%;
font-size: 1.2rem;
transform-origin: 0 100px;
}@keyframes kreisen {
0% {
transform: rotate(0deg)
}100% {
transform: rotate(365deg)
}}
Javascript
1
2
3
4
5
| const text = document.querySelector(".kreistext p");
text.innerHTML = text.innerText.split('').map(
(char, i) =>
`<span style="transform:rotate(${i * 8}deg)">${char}</span>`
).join(''); |
const text = document.querySelector(".kreistext p");
text.innerHTML = text.innerText.split('').map(
(char, i) =>
`<span style="transform:rotate(${i * 8}deg)">${char}</span>`
).join('');
Super, vielen Dank für die Erläuterung und den Code! Wie kann man den rotierenden Kreis an/über etc. ein Objekt anheften/positionieren?
Danke nochmals für den Code! Ich habe die Positionierung selbst geschafft.
Sehr schön für Dich!
… verrätst Du anderen auch WIE? 🙄
was verstehst du nicht? im video gibts eine detailierte anleitung und unten im blogbeitrag hast du sogar den quellcode?