Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Tippen-Effekt, Typing Effect oder Typewriter
smilies.4-user.de

Tippen-Effekte selbst erstellt! – lasse deine Slogans lebendig werden

Typewriter – SVG von OpenClipart-Vectors
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.


Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

Der Schreibmaschinen-Effekt, auch Tippen-Effekt, Typing Effect oder Typewriter Effect ist eine beliebte Animation, um Aufmerksamkeit zu erzeugen. Dabei werden die Buchstaben oder Wörter nacheinander auf der Seite eingeblendet, als ob sie gerade von einer Person getippt werden. Der Effekt beginnt entweder beim Besuch der Website, ob im "Above the Fold"-Bereich oder wenn der Text mit Scrollen in den Viewport gelangt.

Zur Einleitung gleich mit Beispiel:

[tippen] … in Form mit Shortcode [/tippen]

Tippen-Effekt für die Website

Um die Animation von "Tippen-Effekt" zu erzeugen, wird ein PHP-Code mithih JavaScript in der Theme functions.php verwendet und der Text kann mit Shortcodes auf der Website eingebettet werden. Es kann auch passend mit CSS eingerichtet werden.

Tippen-Effekt* Above the Fold. Oberhalb der Falz – das ist der Bereich von Webseite, der für die Nutzer auf den ersten Blick sichtbar ist, ohne zu scrollen. Folgernd ist das dem Medium von Tageszeitung als Bereich der Titelseite oberhalb der Falz, also bevor man die Zeitung zum Weiterlesen auseinanderklappt.

Tippen-Effekt, PHP- und JavaScript-Code

Hier ist der Code für die Theme functions.php, der PHP- und JavaScript-Code enthält. Siehe Einbetten von JavaScript-Code über functions.php

/**
* Erstellt den [ tippen ]-Shortcode.
*/
add_shortcode('tippen', 'shortcode_tippen');
function shortcode_tippen($atts, $content)
{
$defaults = [
'speed' => 50,
'timeout' => 0,
'classes' => '',
];

$atts = shortcode_atts($defaults, $atts);

$classes = 'tippen';
if ( isset($atts['classes']) && '' !== trim($atts['classes'])) {
$classes .= ' ' . $atts['classes'];
}

$html = '<div class="' . esc_attr($classes) . '" data-text="' . esc_attr($content) . '" data-speed="' . esc_attr($atts['speed']) . '" data-timeout="' . $atts['timeout'] . '"></div>';

return $html;
}

/**
* Legt das Script in den Footer der Website, damit es nur einmal aufgerufen wird.
*/
add_action('wp_footer', function () {
echo '
<script>
(function($) {
	if (typeof tippen !== "function") {
		$.fn.isInViewport = function() {
			var element_top = $(this).offset().top;
			var element_bottom = element_top + $(this).outerHeight();
			var viewport_top = $(window).scrollTop();
			var viewport_bottom = viewport_top + $(window).height();
			return element_bottom > viewport_top && element_top < viewport_bottom;
		};

		function tippen(e, i) {
			let currentText = $(e).attr("data-text");
			let currentSpeed = $(e).attr("data-speed");
			let currentContent = $(e).text();

			if (i < currentText.length) {
				$(e).text(currentContent + currentText.charAt(i));
				i++;
				setTimeout(function() {
					tippen(e, i)
				}, currentSpeed);
			}
		}

		$(".tippen").each(function() {
			let i = 0;
			let currentItem = this;
			let timeout = 0;
			let seen = false;

			if ($(currentItem).attr("data-timeout").length) {
				timeout = $(currentItem).attr("data-timeout");
			}

			if (false === seen && $(currentItem).isInViewport()) {
				seen = true;
				setTimeout(function() {
					tippen(currentItem, i);
				}, timeout);
			}

			$(window).on("resize scroll", function() {
				if (false === seen && $(currentItem).isInViewport()) {
					seen = true;
					setTimeout(function() {
						tippen(currentItem, i);
					}, timeout);
				}
			});
		});
	}
})(jQuery);
</script>
';
});

Für den Tipp-Effekt ein 'Danke sehr' an WP-Freund. Beachte auch, dass zur Performance JavaScript mit Bedacht eingesetzt werden sollte.

Kopiere den Code oben und füge ihn ein oder lade ihn als ZIP-Datei (2 KB) herunter. Wenn du die ZIP-Datei verwendest, entferne das <?php am Anfang des heruntergeladenen Codes und füge ihn in die Theme functions.php-Datei ein.

Wenn der Tippen-Effekt nach dem Abspielen durch Anklicken erneut stattfinden soll, dann ist der folgende Teil auszutauschen:

/**
 * Legt das Script in den Footer der Website, damit es nur einmal aufgerufen wird.
 */
add_action('wp_footer', function () {
    echo '
    <script>
    (function($) {
        if (typeof tippen !== "function") {
            $.fn.isInViewport = function() {
                var element_top = $(this).offset().top;
                var element_bottom = element_top + $(this).outerHeight();
                var viewport_top = $(window).scrollTop();
                var viewport_bottom = viewport_top + $(window).height();
                return element_bottom > viewport_top && element_top < viewport_bottom;
            };

            function tippen(e, i) {
                let currentText = $(e).attr("data-text");
                let currentSpeed = $(e).attr("data-speed");
                let currentContent = $(e).text();

                if (i < currentText.length) {
                    $(e).text(currentContent + currentText.charAt(i));
                    i++;
                    setTimeout(function() {
                        tippen(e, i)
                    }, currentSpeed);
                }
            }

            $(".tippen").each(function() {
                let i = 0;
                let currentItem = this;
                let timeout = 0;
                let seen = false;

                if ($(currentItem).attr("data-timeout").length) {
                    timeout = $(currentItem).attr("data-timeout");
                }

                if (false === seen && $(currentItem).isInViewport()) {
                    seen = true;
                    setTimeout(function() {
                        tippen(currentItem, i);
                    }, timeout);
                }

                $(window).on("resize scroll", function() {
                    if (false === seen && $(currentItem).isInViewport()) {
                        seen = true;
                        setTimeout(function() {
                            tippen(currentItem, i);
                        }, timeout);
                    }
                });

                // Füge einen Event-Handler hinzu, um den Tippeffekt erneut zu starten, wenn auf den Text geklickt wird
                $(currentItem).click(function() {
                    i = 0;
                    $(currentItem).text("");
                    tippen(currentItem, i);
                });
            });
        }
    })(jQuery);
    </script>
    ';
});

In diesem Code wird ein Event-Handler hinzugefügt, der auf einen Klick auf den Text reagiert. Wenn der Text angeklickt wird, wird der Tippeffekt erneut gestartet, indem der Text zurückgesetzt und der Tippeffekt mit dem ersten Buchstaben fortgesetzt wird.

Die Snippets zur functions.php ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Der Zeile oben mit 'speed' => 50,, 50 steht für Millisekunden. Also die Zeit, die das Script für einzelnen Buchstaben animiert. Wobei des Effekts dann je kleiner die Zahl, desto schneller der Tipp-Effekt. Im Schnitt ist da so mit 50 die Vorlage. Für Rasantes ist mit  tippen speed="20" oder so.

Shortcode zum Tippen-Effekt

Es können mehrere Shortcode für den Tippen-Effekt pro Seite verwendet werden. So ist es zum Beispiel möglich, einen Tipp-Effekt für ein Widget zu erstellen oder mehrere Tipp-Effekte im Inhalt einer Seite zu integrieren.

Mit dabei sind drei Optionen:

  • Speed für Tipp-Effekt
  • Zeit-Verzögerung zur Ausführung des Codes
  • Individuelles CSS

Im Editor 'Visuell' oder 'Text':

[tippen speed="50" timeout="1500" classes="tippen"]Mein langer Text, der getippt werden soll![/tippen]

  1. speed="50" ist optional und nach Vorlage schon gesetzt. Geht also auch so: [tippen]Mein Text der getippt werden soll![/tippen]
  2. timeout="1500"Die Verzögerung beim Start des Scrollen ist optional und wird in Millisekunden angegeben (in diesem Beispiel 1,5 Sekunden). Dies bedeutet, dass der Code erst nach Ablauf dieser Zeit ausgeführt wird. Für den Bereich "Above the Fold" beginnt der Tippen-Effekt nach dem Aufrufen der Website und wenn der Text in den Viewport scrollt.
  3. classes="tippen" ist optional. Es können auch Schriftarten und CSS-Eigenschaften in den Code integriert werden. Siehe dazu den Bereich "Textdesign" weiter unten.

Textdesign

Ohne weitere CSS-Zuweisungen wird der Text in der Standardformatierung des Themes angezeigt und muss im Shortcode nicht angegeben werden.

Allerdings kann die Classes mit zusätzlichem CSS angepasst werden, um den Tippen-Effekt im gewünschten Stil zu gestalten.

CSS Tippen-Effekt zum Beispiel:

/* Typing Effect CSS Muster 2 */
.tippen2 {
    font-family: "";
    font-size: 28px;
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    color: green;
}

Nochmal das für den visuellen Editor:
[tippen speed="50" timeout="1500" classes="tippen2"]Mein langer Text, der getippt werden soll![/tippen].

Grundsätzlich könnte jedem Shortcode eine eigene CSS-Classes zugewiesen werden:

/* Typing Effect CSS Muster 3 */
.tippen2 {
    font-size: 18px;
}

Direkt im HTML lässt sich auch auszeichnen, am besten im Start-Tag div:

<div style="font-family: terminal, monaco, monospace; font-size: 26px; color: #333399;">[tippen speed="250" timeout="1500" classes="textgap2 tippen2"]Mein langer Text, der getippt![/tippen]</div>

Akkurat ist das mit dem Text

Wenn es um die Gestaltung von Text auf einer Webseite geht, ist es wichtig zu beachten, dass HTML-Auszeichnungen wie <strong>, <a href...> auch 'Enter' für Absatz oder 'Shift / Enter' für Zeilenumbruch können hier nicht verwendet werden. Der Text wird hier visuell dargestellt und jeder Buchstabe und jedes Leerzeichen wird als "Character" in HTML gezählt.

Um mehrere Leerzeichen darzustellen, kann das &nbsp;-Zeichen verwendet werden. Obwohl das geschützte Leerzeichen selbst nicht mehr sichtbar ist, bleibt es als Leerzeichen im Text erhalten, wenn man zwischen dem visuellen und dem Text-Modus hin- und herschaltet.

Tippen-Effekt im Layout berücksichtigen

Das Problem, das im Zusammenhang mit dem folgenden "Layout von Platz" auftreten kann, ist, dass die CSS-Classe auf Mobilgeräten nicht wie beabsichtigt funktioniert hat. In der normalen style.css des Child-Themes griff das CSS nicht für Mobilgeräte, wodurch der Abstand nicht vorhanden war, wie geplant. Es kann vorkommen, dass bestimmte Stile für Mobilgeräte anders geladen werden als für Desktops. Im Customizer gespeichert, trat das Problem nicht auf. Es liegt also daran, wie das CSS für Mobilgeräte geladen wird. Wie das CSS auch ohne Cutomizer abgespeichert werden kann, erkläre ich kurz in diesem Abschnitt CSS-Bedingung.

CSS-Vorlage für das Layout von Platz

Die Tippeffekte sollten responsiv gut durchdacht sein. Aus meiner Erfahrung heraus sollte man nicht umständlich mit komplexen Classes vorgehen. Auf einer Website wird es nicht allzu viele Tippeffekte geben. Daher würde ich für jeden Tippeffekt einen separaten Abschnitt im CSS empfehlen. Das macht das Styling viel übersichtlicher und konsistenter, da jeder Shortcode-Inhalt unterschiedlich gestaltet werden kann und sich auch je nach Bildschirmgröße anders verhält.

Auf diese Weise könnte man jeden Effekt mit einer eindeutigen Classes versehen und diese dann entsprechend responsiv gestalten.

.tuning-gap {
    height: 4em;
    font-family: "Architects Daughter";
    color: #6393f1;
}

@media (max-width: 767px) {
    .tuning-font {
        font-size: 1em;
    }
}

@media (min-width: 768px) {
    .tuning-font {
        font-family: "Architects Daughter";
        font-size: 1.5em;
    }
}

Und hiermit kommen wir zum Abschnitt:

Tippen-Effekt und Zeilensprung

Wenn ein Buchstabe eines Wortes am Ende einer Zeile steht, springt er in der Regel in die nächste Zeile. Obwohl dies im Fließtext möglicherweise nicht auffällt, ist es in einem begrenzten Bereich wie einem Widget besonders wichtig zu beachten.

Zum Beispiel im Text-Modus: … Das n e tt e↵* Tun(ING) für &nbsp; ↵*die Website. Das &nbsp; kann auch mehrmals hintereinander verwendet werden, um hier einen Zeilenumbruch zu erzeugen.

Hinweis: Das Enter-Zeichen ↵ ist nur zur Veranschaulichung für dort wo sich der Zeilenumbruch von selbst ergibt.

  • Es ist zu beachten, dass das zu umbrechende Wort mit einem Leerzeichen nach &nbsp; versehen ist.

Zum Beipiel tuning-gap und tuning-font für den folgenden Tippen-Effekt:

In diesem Text sind nach "heißt:" sechs &nbsp; hinzugefügt, um einen korrekten Zeilenumbruch im Desktop-Lesemodus zu erzielen. Jedoch kann dies im normalen oder mobilen Modus zu unerwünschten Leerzeichen führen. Eine mögliche Lösung besteht darin, die Worttrennung mit CSS zu unterbinden, beispielsweise durch die Verwendung von hyphens: none;.

Klick den Text zum erneuten Abspielen an.

Trotzdem beginnt der Text auch ohne Worttrennung der vorhergehenden Zeile und bricht dann als ganzes Wort um. Dies wirkt oft harmonischer als ein Hin und Her mit der Worttrennung.

Da meine Empfehlung ohnehin ist, jeden Tippen-Effekt separat zu stylen, könne man diesen Zweizeiler auch mit max-width: 600px; stylen und währe hier die ideale Lösung. – viel anders gehts nicht, traue ich mich schon zu schreiben.

.tuning-gap {
    height: 4em;
    font-family: "Architects Daughter";
    color: #6393f1;
    hyphens: none;
    /*max-width: 600px;*/
}

@media (max-width: 767px) {
    .tuning-font {
        font-size: 1em;
    }
}

@media (min-width: 768px) {
    .tuning-font {
        font-family: "Architects Daughter";
        font-size: 1.5em;
    }
}

Obige ist die Schriftart im tuning-gap dabei und tuning-font nur die Schriftgröße. Damit ist das in einem, da sich der Platzhalter durch die unterschiedliche Schriftgröße relativiert.

Die Classes für Fonts anderer Tippen-Effekte könnte man zusammenfassen, aber das so miteinander zu vermischen lohne der Mühe kaum. – von da an würde ein Gedicht fällig 😆

Ich habe die Classes mal so erstellt, dass es zunächst den Anschein hat, dass sie performant sind – allerdings ist dem nicht so. Es entstehen immer wieder Ungereimtheiten. Daher empfehle ich, wie auf dieser Seite hier, für jeden Effekt separate Classes zu verwenden. Dadurch bleibt das Styling viel besser wartbar und man verliert auch nicht den Spaß an den Tippeffekten.

Für klare Effekte: Eine Class pro Tipp.

Folgendes ist nicht das beste Beispiel und sollte an die spezifischen Anforderungen angepasst werden. Auch die Media Query sollte immer entsprechend den individuellen Bedürfnissen erstellt werden.

classes="textgap" CSS-Schablonen
/* Tippeffekt → classes="textgap" */

/* Standardhöhen */
.textgap1 { 
    height: 1em;
}

.textgap2 { 
    height: 2em;
}

.textgap3 { 
    height: 3em;
}

/* Höhe bei bestimmten Bildschirmbreiten */
@media all and (min-width: 720px) and (max-width: 1080px) {
    .textgap3 { 
        height: 6em;
    }
}

/* Weitere Platzhalter */
.textgap4 { 
    height: 4em;
}

Der Shortcode könnte nun so sein:

[tippen speed="75" timeout="1500" classes="tippen2 textgap4"]… Das n e tt e Tun(ING) für&nbsp; die Website[/tippen]

Somit ist der Raum für den Text da und wirkt dann nur ruhig und schön! – siehe auch des Beispiels im Normalmodus, Seitenleiste links oben.

Zum Responsiv-Design für Tablet-Computer: Dies ist nur ein Beispiel, das je nach Theme unterschiedlich ausfallen kann.

Im Beispiel hier mit dem 'Twenty Fourteen'-Theme und der Darstellung auf einem stehenden Tablet-Computer ist die linke Seitenleiste ausgeblendet, während die rechte Seite erhalten bleibt. Außerdem passt der normale Platzhalter für die Seitenleiste nicht gut zum responsiven Design.

Daher werden zwei CSS-Classes verwendet, eine für die normale Ansicht und eine für die responsive Ansicht mit einer Media Query. Beide haben denselben Selektor, mit unterschiedlichen Deklarationswerten.

Im ersten Beispiel wird die Classes textgap3a für Desktop- und Mobilgeräte verwendet, was dem responsiven Design entspricht. Im zweiten Beispiel wird eine Media Query verwendet, um die Höhe von 3em auf 6em für Tablet-Computer oder Displays mit einer Breite von 720px bis 1080px zu erhöhen. Dies passt soweit.

Beide Beispiele müssen denselben Klassennamen haben, aber unterschiedliche Höhenwerte haben:

/* Platzhalter Desktop und Handy */
.textgap3a {
    height: 3em;
}

/* Platzhalter so Tabletcomuputer */
@media all and (min-width: 720px) and (max-width: 1080px) {
    .textgap3a {
        height: 6em;
    }
}

Zum Abschluss des Fleißes und zur Abrundung des Fleißes hier noch ein Beispiel: Der Tippeffekt startet im sichtbaren Bereich des Viewports und beginnt nach 2 Sekunden:

<h4>Katze ipsum dolor</h4>
Lesezeit 1 min 20 s.
<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
    [tippen speed="10" timeout="2000" classes="textgap33"]… Versuchen sie nicht,
    altes futter mit neuem zu mischen, um zu täuschen! … [/tippen]
  </div>
</div>

Der Start erfolgt nach dem 'Scrolling im Viewport', und der Text befindet sich in einem Scrollbereich. Der Platzbedarf für den Typing-Effekt wird durch die CSS-Klasse vorbereitet. Dadurch wird das nach unten Gleiten des nachfolgenden Inhalts vermieden, und der Platzbedarf wird durch den Scrollbereich begrenzt.

Katze ipsum dolor
Lesezeit 1 min 20 s.

…das Revier mag gleich die Domain sein. Vs.
…das Revier mag gleich die Domain sein. Vs.

 

Ähnliche Hinweise!

Folgendes ist kein spezielles Plug-in für WordPress, aber welches es auch für WordPress gibt:https://wordpress.org/plugins/wp-typeit/

… Statt "WP Typelt Lite" das "WP Typelt"? – https://github.com/alexmacarthur/wp-typeit. Aber siehe meine Bemerkung am Schluss …

NAME UND STANDARDWERTBESCHREIBUNG
strings: [][string | array]Zeichenfolge(n) des einzugebenden Textes.
speed: 100[number]Tippgeschwindigkeit, gemessen in Millisekunden zwischen den einzelnen Schritten.
deleteSpeed: null[number | null]Löschgeschwindigkeit. Wenn es null bleibt, beträgt es 1/3 der Typgeschwindigkeit.
lifeLike: true[boolean]Macht das Tipptempo unregelmäßig, als würde es eine echte Person tun.
cursor: true[boolean | CursorOptions]Zeigen Sie einen blinkenden Cursor am Ende der Zeichenfolge(n) an oder überschreiben Sie die Standardanimation. Weitere Informationen finden Sie hier.
cursorSpeed: 1000[number]Die Blinkgeschwindigkeit des Cursors, gemessen in Millisekunden.
cursorChar: |[string]Das für den Cursor verwendete Zeichen. HTML funktioniert auch!
breakLines: true[boolean]Steuert, ob mehrere Zeichenfolgen übereinander gedruckt werden ( breakLines: true) oder ob sie gelöscht und durcheinander ersetzt werden ( breakLines: false).
nextStringDelay: 750[number | array]Die Zeitspanne (in Millisekunden) zwischen der Eingabe mehrerer Zeichenfolgen. Wenn ein Array übergeben wird, wird der erste Wert als Verzögerung verwendet, bevor eine neue Zeichenfolge beginnt, und der zweite Wert wird als Verzögerung verwendet, nachdem eine Zeichenfolge gerade beendet wurde. Durch die Übergabe wird TypeIt beispielsweise [1000, 2000]angewiesen, 1000 ms zu pausieren, bevor eine neue Zeichenfolge eingegeben wird, und 2000 ms zu warten, nachdem eine Zeichenfolge gerade abgeschlossen wurde. Wenn eine Zahl übergeben wird, wird dieser Wert halbiert.
waitUntilVisible: false[boolean]Legt fest, ob die Instanz automatisch mit der Eingabe beginnt .go()oder erst, wenn das Zielelement im Ansichtsfenster sichtbar wird. Wenn Sie nicht möchten, dass Instanzen weit unten auf der Seite beginnen, bis sie sichtbar sind, legen Sie diese Option auf fest true.
startDelete: false[boolean]Legt fest, ob die Instanz mit dem Löschen von Zeichenfolgen innerhalb des Elements und der anschließenden Eingabe der über JSON oder Begleitfunktionen definierten Zeichenfolgen begonnen werden soll. Wenn dies auf festgelegt ist true, sollten in Ihrem Zielelement natürlich Zeichenfolgen fest codiert sein.
startDelay: 250[number]Die Zeitspanne, bevor das Plugin nach der Initialisierung mit der Eingabe beginnt.
loop: false[boolean]Ob Ihre Zeichenfolgen nach Abschluss kontinuierlich wiederholt werden.
loopDelay: null[number | array]Die Zeitspanne zwischen dem erneuten Durchlaufen einer Zeichenfolge oder einer Zeichenfolgengruppe. Diese Option verhält sich identisch mit nextStringDelay. Wenn ein Array übergeben wird, ist der erste Wert die Zeit, bevor die Eingabe erneut beginnt (nachdem die Zeichenfolgengruppe gelöscht wurde), und der zweite Wert ist die Zeit unmittelbar nach der Eingabe der Zeichenfolgengruppe, bevor sie gelöscht wird gelöscht, um neu zu starten. Wenn sie undefiniert bleibt, nextStringDelaywird die Option verwendet.
html: true[boolean]Steuert, ob Zeichenfolgen als HTML analysiert oder wörtlich behandelt werden. Wenn Ihr Zielelement eine Formulareingabe oder ein Textbereich ist, wird dieser Wert automatisch durch überschrieben false.

Das Plug-in scheint nicht mehr ordnungsgemäß zu funktionieren, besonders wenn mehrere Animationen auf einer Seite vorhanden sind. Vielleicht habe ich mich auch nicht ausreichend mit dem Plug-in vertraut gemacht.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-Mai