Text animation mit HTML & CSS

von | Mrz 15, 2019 | Allgemein, Mein Youtube Kanal, Technik | 4 Kommentare

Heute möchte ich euch zeigen, dass eine kleine Text animation im Blog überhaupt keine Hexerei ist. Ja ich behaupte, dass jeder der mit WordPress ein Text schreiben kann, kann auch einen Text animieren.

Und zwar möchte ich euch zeigen, wie man so eine kleine Animation wie hier machen kann.

Ich sage

Um diese Animation auch machen zu können, müsst ihr nur ein wenig CSS in euer WordPress einbauen.

Zuerst einmal legt ihr 2 Klassen an – wie in diesem Beispiel

1
2
3
<div class="textanimation_stil">
Ich sage <span class="textanimation_text"></span>
</div>

Nachher gibt ihr in euer Style.css File folgendes ein:

1
2
3
4
5
.textanimation_stil {
font-size: 40px;
color: aqua;
font-weight: 700;
}

Und dann definiert ihr den Wechsel der Wörter – wie zb hier

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.textanimation_text:before {
	content: 'Hoi';
	animation: animate infinite 8s;
}
@keyframes animate 
{
	0%
	{
		content: 'Hoi';
	}
		10%
	{
		content: 'Hallo';
	}
		50%
	{
		content: 'Welcome';
	}
		75%
	{
		content: 'Grüezi';
	}
}

Wer diesen Text-Wechsel auch haben möchte, und mehr Erklärt haben möchte, der sollte sich mein neues Youtube Video anschauen.

Wie ihr jetzt seht – es ist gar nicht so schwer sowas einzubauen – das kann eigentlich jeder 🙂

Ich wünsche viel Spass





4 Kommentare

  1. Steffi

    Hallo, sehr coole Sache super erklärt Daumen hoch ist vergeben! Wie und wo kann ich einfügen dass der Text mittig ist und kann man die Wörter die wechseln in einer anderen Farbe als den feststehenden Text machen?
    Haben Sie auch ein Video in dem Sie Scroll Texte (bewegliche Texte) in WordPress erklären? Schönes Wochenende – LG STEFFI

    Antworten
    • Eric-Oliver Mächler

      Hoi Steffi.

      Freut mich wenn es dir gefällt.

      Nun du musst einfach in der classe vom textanimation_stil zum beispiel ein text-align:center; einfügen. dann ists in der mitte. wäre eine möglichkeit.

      wegen den wechselfarben gibts keine wirklich 100% saubere lösung – in diesem fall wirds immer ein wenig komisch aussehen – sonst einfach in den keyframes nach dem content die color:red; einfügen und so definieren. hier habe ich ein Beispiel für dich (https://webinar.projekte.dev/2019/11/wechsel-text/) du siehst den Fehler bei „Hoi“.

      was für Scrolltexte meinst du? Kannst du mir ein Bsp zeigen, damit ich verstehe was du suchst?

      Antworten
  2. Max

    Ahoi,

    diese Animation funktioniert leider nicht im Safari-Webbrowser. Wissen Sie woran das liegen könnte?

    Viele Grüße
    Max

    Antworten
    • Eric-Oliver Mächler

      ja das ist leider so – gewisse animationen werden von safari nicht unterstützt und funktionieren darum dort auch nicht

      Antworten

Einen Kommentar abschicken

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

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung