
Wörter animieren
Zaubern Sie etwas Schwung in Ihre Botschaften
Unser WordPress-Plugin ermöglicht animierten Wort Tausch, das Verdecken und Austauschen von Wörtern sowie dynamisches Hervorheben einzelner Textteile. Mit Funktionen wie dem animierten Austausch von Buchstaben, dem Durchstreichen von Wörtern und der Möglichkeit, Text aus farbigen Boxen entstehen zu lassen, bietet das Plugin vielseitige Anwendungsmöglichkeiten für lebendige und interaktive Webinhalte und eine Alternative zu den etwas aus der Mode gekommenen “Fly-in-Effekten”
Anwendungsmöglichkeiten
Um einige weitere der vielen Einsatzmöglichkeiten zu nennen:
- Chromatische Blöcke, die sich in Text verwandeln
- Beobachten Sie mit Spannung, wie sich Satzstrukturen Wort für Wort manifestieren oder lexikalische Einheiten in einer faszinierenden Rotation präsentieren.
- Du kannst Wörter verstecken und dann – zack! – wieder sichtbar machen.
Demo
Der folgende Text deckt den Satz aus dem obigen Video auf, wenn dieser auf dem Bildschirm erscheint:
Im Kühlschrank ist fast nur noch Licht
Wir müssen dringend einkaufen
Workflow im Gutenberg Editor

Das Textanimationstool fügt Ihrem WordPress Gutenberg-Editor eine neue Funktion hinzu, mit der Sie einfach dynamische Textanimationen erstellen können.
Markieren Sie den Text, den Sie animieren möchten, und wählen Sie Animate-Texts
Animation im Pop-Up steuern
Der Screenshot zeigt die verfügbaren Optionen. Kompaktes Interface mit überschaubaren Optionen, dennoch sind vielfältige Text-Exchange-Animationen möglich.
Tip: Zum “Einlettern” eines Wortes setzt man die Farbe zunächst auf die Hintergrund-Farbe (oder schwarz auf schwarz für “ausgeschwärzt”), das zweites Wort, ohne Textfarbe , wird dann von links-nach-rechts eingeblendet.

- Wörter, die in der Austauschanimation verwendet werden
- Wie lange jedes Wort angezeigt wird
- Farben für Text, Hintergrund und Unterstreichung
- Art der Unterstreichung / Durchstreichung (solid, wavy, dashed)
- Checkbox: durchstreichen statt unterstreichen
- Abstand zwischen den Buchstaben
- Horizontale Abstand vor und nach dem Wort
- Duplizieren, Ordnen, Löschen
- Inline-Hilfe
Demo:
und als “Live-Animation” mit 👉 und Orange als Textfarbe und schnelleren Übergängen
👉 Easy word lettering animations
Beste Ergebnisse lassen sie mit ähnlichen Text-Längen erzielen.
Free vs. Paid Version
Kostenlose Version
- Textfarbe einstellen
- Einfache Textanimation mit Einblend- und Ausblendeffekten
- Begrenzt auf 3 Textersetzungen (Originaltext + 2 Ersetzung)
- Einfache Wiederholungs- und Verzögerungsoptionen
Pro-Version
Alle Funktionen der kostenlosen Version, plus:
- Textfarbe, Hintergrundfarbe, Farbe Unterstrich
- Unbegrenzte Textersetzungen
- Padding und Buchstaben Abstand für jedes einzelne Wort um Sprünge zu minimieren
- Weitere Clip-Animations-Typen (rechts, links, oben, unten)
- Linientyp-Optionen (durchgezogen, gewellt, gestrichelt)
- Durchstreich-Effekt
- Individuelles Timing für jede Textersetzung
Einmalige Zahlung, keine wiederkehrenden Kosten!
Verwenden Sie es auf so vielen Websites wie Sie möchten!
FAQs
Was macht das Text-Exchange and Lettering Animation Plugin?
Das Plugin ermöglicht es Ihnen, dynamische Textanimationen in WordPress zu erstellen. Es kann Textelemente in Absätzen, Überschriften und Schaltflächen animieren, indem es Clip-Path-Animationen verwendet, um den Text ein- und auszublenden. Der Austausch von Textelementen erfolgt über JavaScript.
Wie funktioniert es (technisch)?
Das Plugin fügt dem Gutenberg-Editor einen RichTextToolbarButton (Animate-Texts) hinzu, mit dem Sie Text auswählen und Animationseigenschaften hinzufügen können. Es verwendet Klassen und Datenattribute, um Animationen im Frontend zu steuern. Ein Intersection Observer startet die Animationen, sobald diese sichtbar werden.
Wie macht eine farbige Boxen zu Text Animation?
Für das erste Wort setzt man Text- und Hintergrundfarbe gleich. Für das zweite Wort dann unterschiedlich. Dies erzeugt den Effekt das aus einem farbigen Block ein Text entsteht: Text
Text-Links animieren?
Eigentlich ist es besser, Buttons dafür zu verwenden. Text-Links erfordern eine sorgfältige Textauswahl. Das geht, wenn man zuerst die Markierungen des Links setzt. Dann müssen Sie innerhalb des verlinkten Textes die Textteile erneut markieren und können dann Animationen hinzufügen. Dies ist nicht empfehlenswert.
Wie funktioniert das Plugin mit Gutenberg?
Das Plugin fügt dem Gutenberg-Editor eine RichTextToolbarButton hinzu. Damit können Sie Text auswählen und Animationen direkt im Editor anwenden. Das Plugin ist nahtlos in Gutenberg integriert, so dass Sie es einfach mit Ihren bestehenden Inhalten verwenden können. Ohne Gutenberg ist das Plugin nicht funktionsfähig.
Was ist der Unterschied zwischen der kostenlosen und der kostenpflichtigen Version?
Die kostenlose Version bietet grundlegende Textanimationsfunktionen, während die kostenpflichtige Version erweiterte Optionen wie unbegrenzte Textersetzungen, benutzerdefinierte Farben, mehrere Clip-Typen, Linieneffekte und weitere Anpassungsoptionen im Gutenberg-Editor enthält.
Wie stark wirkt sich das Plugin auf die Ladezeiten von Seiten aus?
Das Plugin ist so konzipiert, dass es nur etwa 2.5 KB JavaScript-Code und 1 KB CSS-Code zu Ihrem Frontend hinzufügt. Dieser minimale Fußabdruck stellt sicher, dass die Leistung Ihrer Website nicht wesentlich beeinträchtigt wird. Auch mehrere gleichzeitig laufende Animationen stellen kein Problem dar.
Mit welchen Blocks funktioniert das Plugin?
Das Plugin beruht nicht auf bestimmten Blocks. Es ist “Rich-Text” basiert und funktioniert mit allen Textelementen im Editor, einschließlich Schaltflächen und Links. Wenn Sie Text in Links animieren, ist es wichtig, zuerst den Link zu setzen, dann die Animation anzuwenden und bei der Auswahl der Textelemente genau zu sein. Dieses Vorgehen wird nicht empfohlen. Es ist besser Buttons zu verwenden.
Was macht das serverseitige PHP in diesem Plugin?
Das serverseitige PHP ist extrem leichtgewichtig. Es fügt nur das erforderliche WordPress-Plugin-Frontmatter hinzu und reiht jeweils eine CSS- und JS-Datei für das Frontend und Backend/Gutenberg-Editor ein.
Wie funktioniert die Animation hinter den Kulissen?
Das Plugin verwendet eine Kombination aus JavaScript und CSS, um die Animationen zu erstellen. Es nutzt die Intersection Observer API, um Animationen auszulösen, wenn Elemente den Viewport betreten, und sorgt so für eine effiziente Leistung.
Ist das Plugin sicher?
Das Plugin enthält keinen schädlichen Code, sendet keine Daten aus und enthält keine Skripte oder Dienste von Drittanbietern. Es wurde mit Blick auf die Sicherheit entwickelt.
Entdecken Sie die Vielseitigkeit unseres Plugins für Textanimationen
Schreibeffekte: Erzeugen Sie eine „tippende“ Illusion
Wort-für-Wort Effekte für erzählerische Effekte
Animieren Sie Schaltflächentext, um Aufmerksamkeit zu lenken
Das -versprochen- letzte “Live Beispiel” zeigt wie vielfältig die Anwendungsmöglichkeiten sind. Vielmehr auch wie performant auch mehrere Animationen gleichzeigt laufen.

BLACKEDOUT NEWSPAPERS
- Start with a newspaper article or page
- Identify words or phrases that resonate with you
- Use a marker to black out the rest of the text, leaving only your chosen words visible
- The remaining words form your new poem