Werbung

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

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.

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

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.

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

---

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.

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

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.

Beachte, die Auszeichnung erfolgt nicht mit class, denn mit classes. Das geht aus der Programmierung so hervor.

Textdesign

Ohne weitere CSS-Zuweisungen wird der Text in der Standardformatierung 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:

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

Grundsätzlich sollte jedem Shortcode eine eigene CSS-Classes zugewiesen werden:

/* Mein langer Text der getippt */
.langer-text-schrift {
	font-family: 'Swanky and Moo Moo';
	font-size: 2.2em;
	font-weight: 400;
	color: #333399;
}

@media (max-width: 767px) {
    .langer-text-gap {
		height: 3em;
	}
}

@media (min-width: 768px) {
    .langer-text-gap {
		height: 2em;
	}
}

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

<div style="font-family: terminal, monaco, monospace; font-size: 2.2em; color: #333399;">[tippen speed="250" timeout="1500" classes="langer-text-gap langer-text-schrift"]Mein langer Text, der getippt![/tippen]</div>

Akkurat ist das mit dem Text

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

Um mehrere Leerzeichen darzustellen, kann das  -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

Beispiel:

• Das obige Beispiel wirkt eher störend, während das folgende die Textlücke schließt:

Abschließend ist die Kompatibilität des Tippen-Effekts mit verschiedenen Bildschirmgrößen und Geräten zu testen. Ein responsives Design gewährleistet eine konsistente Darstellung und eine optimale Nutzererfahrung auf allen Endgeräten.

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   ↵*die Website. Das   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   versehen ist.

Zum Beipiel die folgenden Tippen-Effekte:

Die herkömmliche Darstellung, wenn sich beim Umbruch eine Worttrennung ergibt:

[tippen speed="75" timeout="3000" classes="tuning-gap tuning-font"]Das Tun(ING) für optimierte Website, das heißt: weniger ist immer mehr –[/tippen]

Das Folgende ist mit   vor dem trennenden Wort:

[tippen speed="75" timeout="3000" classes="tuning-gap tuning-font"]Das Tun(ING) für optimierte Website, das heißt:       weniger ist immer mehr –[/tippen]

In diesem Text sind nach "heißt:" sechs   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.

[tippen speed="75" timeout="3000" classes="tuning-gap-hypens tuning-font"]Das Tun(ING) für optimierte Website, das heißt: weniger ist immer mehr –[/tippen]

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 für Desktopansicht auch mit max-width: 600px;:

Das ist hier die ideale Lösung. – viel anders geht’s nicht, traue ich mich schon zu schreiben.

[tippen speed="75" timeout="3000" classes="tuning-gap-width tuning-font"]Das Tun(ING) für optimierte Website, das heißt: weniger ist immer mehr –[/tippen]

Das CSS von diesen Beispielen:

/* Beitrag Tippen "tuning" */

.tuning-gap { 
	height: 4em;
}

.tuning-gap-hypens { 
	height: 4em;
	hyphens: none;
}

.tuning-gap-width { 
	height: 4em;
	max-width: 600px;
}

@media (max-width: 767px)  {
    .tuning-font {
		font-family: 'Architects Daughter';
		font-size: 1em;
		color: #6393F1;
	}
}

@media (min-width: 768px) {
	.tuning-font {
		font-family: 'Architects Daughter';
		font-size: 1.5em;
		color: #6393F1;
	}
}
/* Ende Beitrag Tippen "tuning" */

In diesem kleinen Beispiel sind die Classen sauber getrennt: Im tuning-gap sind die Platzhalter und tuning-font betrifft die Schrift. In diesem Beispiel ist zu beachten, dass die Platzhalter für Mobilgeräte dieselben sind, da sich dies durch die unterschiedliche Schriftgröße relativiert.

Die Classes für Gap und Font anderer Tippen-Effekte könnte man zusammenfassen, aber das so miteinander zu vermischen lohne der Mühe nicht und ist nur von Nachteil. – 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.

Wie man es nicht machen sollte? Für mehrere Tippen-Effeckte Schablonen erstellen und diese dann untereinander zu vermischen.

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

Bereit für Anpassungen?
Sei auf unterschiedliche Aspekte vorbereitet!

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 sollten zwei CSS-Classes verwendet werden, 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 beispiel-gap-1 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 Classennamen haben, aber unterschiedliche Höhenwerte haben:

/* Platzhalter Desktop und Handy */
.beispiel-gap-1 {
    height: 3em;
}

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

Zum Abschluss des Fleißes

Zum Abschluss des Fleißes und zur Abrundung des Fleißes hier noch ein Beispiel, wie aufwändig sowas werden kann, damit das unterschiedlichen Bildschirmgrößen auch passend ist:

/* Beitag tippen, Katze */

@media (max-width: 374px) {
    .katze-gap { height: 55em; }
}

@media (min-width: 375px) and (max-width: 424px) {
    .katze-gap { height: 45em; }
}

@media (min-width: 425px) and (max-width: 767px)  {
    .katze-gap { height: 40em; }
}

@media (min-width: 768px) {
    .katze-gap { height: 26em; }
}

/* Ende Beitag tippen, Katze */

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="30" timeout="2000" classes="katze-gap"]… 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-Classe 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.

 

Ähnliche Hinweise!

• Typewriter Effect
• So zum erst einmal sehr gut! – Getippter Text mit CSS-Animationen.
• Sehr hervorzuheben ist das Plug-in Animated Typed JS Shortcode, aber das mit dem Start, wenn der Text mit Scrollen in den Viewport gelangt ist nicht dabei.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Juni