Trick # 294 | Dieser Beitrag beinhaltet 537 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Heute ein interessanter Animationseffekt: Texte werden quasi live am Monitor geschrieben. Dieser Typewritereffekt startet, sobald die Seite geladen wird. Sie benötigen bloss einige Zeilen CSS-Code – wir zeigen Ihnen alles weitere.
Damit Sie sich ein Bild machen können – hier ein Beispiel dessen:
Lorem ipsum dolor sit amet
Laden Sie die Seite neu, um den Typewriter-Effekt noch einmal zu starten.
Der Text wird gewissermassen live geschrieben; dann bleibt der Cursor stehen und blinkt.
Für eine solche Animation benötigen Sie CSS-Code. Den folgenden Block können Sie kopieren und ins CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS – einfügen:
.typewriter h2 {
overflow: hidden; /* Sorgt dafür, dass der Inhalt erst während der Animation sichtbar wird */
border-right: .15em solid #59B14B; /* Der Schreibmaschinen-Cursor */
white-space: nowrap; /* Behält den Inhalt in einer einzigen Zeile */
margin: 0 auto; /* Erzeugt den Bildlaufeffekt beim Tippen */
/*letter-spacing: .15em;*/ /* Nach Bedarf anpassen */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* Der Schreibmaschineneffekt */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* Der Schreibmaschinen-Cursor-Effekt */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #59B14B; }
}Nun wechseln Sie in den Texteditor und suchen die gewünschte Stelle. Tun Sie dies in der HTML-Ansicht und fügen Sie am geeigneten Ort die folgenden Zeilen ein:
<div class="typewriter">
<h2>Lorem ipsum dolor sit amet</h2>
</div>Falls Sie das Divi-Theme benutzen, eignet sich auch ein Code-Modul für die Platzierung des Textblocks.
Im Einsatz sieht der Effekt dann folgendermassen aus:
Lorem ipsum dolor sit amet
Laden Sie die Seite neu, um den Typewriter-Effekt noch einmal zu starten.
Werbung
Werbung
