WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Wir erstellen einen runder rotierender Kreistext mit HTML, CSS und Javascript

von | Mai 13, 2024 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Javascript

Inhaltsverzeichnis

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>

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)
            }
 
        }

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('');




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert