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 erstellen! – lasse deine Slogans lebendig werden

Typewriter – SVG von OpenClipart-Vectors
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

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 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.

Die Snippets zur functions.php ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – bleibt das auch nach Theme-Update so.
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 das Shortcodes 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.

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.

Textdesign

Die CSS-Klasse für den Tippen-Effekt lautet .tippen {}. Die Verwendung der Klasse tippen ist immer erforderlich, damit das Script ordnungsgemäß funktioniert. Ohne weitere CSS-Zuweisungen wird der Text in der Standardformatierung des Themes angezeigt und muss im Shortcode nicht angegeben werden.

Allerdings kann die Klasse 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-Klasse 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"]Mein langer Text, der getippt![/tippen]</div>

Tippen-Effekt im Layout berücksichtigen

CSS-Vorlage für das Layout von Platz

Folgendes ist ein gutes 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" */
.textgap1 { 
    height: 1em;
}

.textgap2 { 
    height: 2em;
}

.textgap3 { 
    height: 3em;
}

@media all and (min-width: 720px) and (max-width: 1080px)
	{
    .textgap3 { 
        height: 6em;
    }
}

.textgap4 { 
    height: 4em;
}

@media all and (min-width: 720px) and (max-width: 1080px)
	{
    .textgap4 { 
        height: 6em;
    }
}

.textgap6 { 
    height: 6em;
}

@media all and (min-width: 1025px)
{
.textgap7 { 
    height: 7em;
}

@media all and (min-width: 769px) and (max-width: 1024px)
{
.textgap7 { 
    height: 8em;
}
}

@media all and (max-width: 768px)
{
.textgap7 { 
    height: 10em;
}
}

.textgap8 { 
    height: 8em;
}

.textgap9 { 
    height: 9em;
}

@media all and (min-width: 1080px)
	{
    .textgap10 { 
        height: 10em;
    }
}

@media all and (min-width: 768px) and (max-width: 1079px)
	{
    .textgap10 { 
        height: 12em;
    }
}

.textgap12 { 
    height: 12em;
}

@media all and (min-width: 1024px)
	{
    .textgap13 { 
        height: 13em;
    }
}

@media all and (min-width: 425px) and (max-width: 1023px)
	{
    .textgap13 { 
        height: 16em;
    }
}

@media all and (min-width: 375px) and (max-width: 424px)
	{
    .textgap13 { 
        height: 19em;
    }
}

@media all and (min-width: 320px) and (max-width: 374px)
	{
    .textgap13 { 
        height: 23em;
    }
}

.textgap15 { 
    height: 15em;
}

.textgap33 { 
    height: 33em;
}

.textgap36 { 
    height: 36em;
}
/* ENDe "textgap" für Typing Effect */

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 Seitenleiste links ganz 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-Klassen 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;
    }
}

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.


Als Fleißaufgabe hier noch ein Beispiel: Der Tippeffekt startet im sichtbaren Bereich des Viewports und beginnt erst 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.


Aktualisiert im Jahr 2023-Juli