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.
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
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
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?
Ahoi,
diese Animation funktioniert leider nicht im Safari-Webbrowser. Wissen Sie woran das liegen könnte?
Viele Grüße
Max
ja das ist leider so – gewisse animationen werden von safari nicht unterstützt und funktionieren darum dort auch nicht