Werbung

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

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.

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 mithin 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. Das ist der Form praktikabel, weil das Snippet auch PHP-Code enthält.

Wir stellen hier drei Codes vor, die sich in ihrer Funktionsweise unterscheiden:

• Der erste Basis-Code (Version 1.1 / Basis-Code) ist der kürzeste und erfüllt die grundlegenden Anforderungen, um den Tippen-Effekt als Blickfang zu nutzen.
• Der zweite Code (Version 1.2) ermöglicht einen Neustart des Tippen-Effekts durch einen Klick auf das Element,
• Der dritte Code (Version 1.3) wie (Version 1.2) und ermöglicht auch HTML-Auszeichnungen wie Zeilenumbruch durch Shift+Enter bzw. <br>.

Version 1.1 / Basis-Code

/**
 * Erstellt den [ tippen ]-Shortcode.
 * Version 1.1 / Basis-Code
 */
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="' . esc_attr($atts['timeout']) . '"></div>';

    return $html;
}

/**
 * Fügt das Script in den Footer ein.
 */
add_action('wp_footer', function () {
    echo '
<script>
document.addEventListener("DOMContentLoaded", function() {
    function tippen(element, index) {
        const currentText = element.getAttribute("data-text");
        const currentSpeed = element.getAttribute("data-speed");
        const currentContent = element.innerHTML; // Verwende innerHTML anstelle von innerText, um Leerzeichen zu berücksichtigen

        if (index < currentText.length) {
            element.innerHTML = currentContent + currentText.charAt(index); // Fügt korrekt Leerzeichen hinzu
            setTimeout(function() {
                tippen(element, index + 1);
            }, currentSpeed);
        }
    }

    function handleIntersection(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const element = entry.target;
                const timeout = element.getAttribute("data-timeout") || 0;
                setTimeout(function() {
                    tippen(element, 0);
                }, timeout);
                observer.unobserve(element); // Stop observing once the animation starts
            }
        });
    }

    const observer = new IntersectionObserver(handleIntersection, {
        threshold: 0.1 // Trigger when at least 10% of the element is visible
    });

    document.querySelectorAll(".tippen").forEach(element => {
        observer.observe(element);
    });
});
</script>
';
});

Version 1.2 / Neustart durch Klick auf das Element

1. Click-Listener hinzugefügt: Wenn der Benutzer auf ein .tippen-Element klickt, wird der aktuelle Inhalt gelöscht und das Tippen von vorne gestartet.
2. Reset des Inhalts: Das element.innerHTML = "" setzt den Inhalt zurück, bevor das Tippen neu gestartet wird.
   • typingTimeouts-Map: Eine Map, die die aktiven setTimeout-IDs für jedes .tippen-Element speichert. Dies erlaubt es, den laufenden Timer zu stoppen, bevor das Tippen neu gestartet wird.
   • clearTimeout-Funktion: Bevor ein neuer Timer für das Tippen gestartet wird, überprüft der Code, ob bereits ein Timer für das aktuelle Element läuft, und stoppt diesen mit clearTimeout.
   • Sicherstellung eines sauberen Starts: Jedes Mal, wenn das Tippen neu gestartet wird, wird der alte Prozess gestoppt, wodurch verhindert wird, dass Buchstaben durcheinander geraten.

/**
 * Erstellt den [ tippen ]-Shortcode.
 * Version 1.2 / Neustart durch Klick auf das Element
 */
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="' . esc_attr($atts['timeout']) . '"></div>';

    return $html;
}

/**
 * Fügt das Script in den Footer ein.
 */
add_action('wp_footer', function () {
    echo '
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Objekt zum Speichern von Timeout-IDs, um laufende Timers zu kontrollieren
    const typingTimeouts = new Map();

    function tippen(element, index) {
        const currentText = element.getAttribute("data-text");
        const currentSpeed = element.getAttribute("data-speed");
        const currentContent = element.innerHTML;

        if (index < currentText.length) {
            element.innerHTML = currentContent + currentText.charAt(index);
            const timeoutId = setTimeout(function() {
                tippen(element, index + 1);
            }, currentSpeed);
            typingTimeouts.set(element, timeoutId); // Timeout-ID speichern
        }
    }

    function handleIntersection(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const element = entry.target;
                const timeout = element.getAttribute("data-timeout") || 0;
                setTimeout(function() {
                    tippen(element, 0);
                }, timeout);
                observer.unobserve(element); // Stop observing once the animation starts
            }
        });
    }

    const observer = new IntersectionObserver(handleIntersection, {
        threshold: 0.1 // Trigger when at least 10% of the element is visible
    });

    document.querySelectorAll(".tippen").forEach(element => {
        observer.observe(element);

        // Fügt einen Click-Event-Listener hinzu, um das Tippen bei Klick neu zu starten
        element.addEventListener("click", function() {
            // Vorherige Timeout stoppen, falls vorhanden
            if (typingTimeouts.has(element)) {
                clearTimeout(typingTimeouts.get(element));
                typingTimeouts.delete(element);
            }

            element.innerHTML = ""; // Löscht den aktuellen Inhalt
            tippen(element, 0); // Startet das Tippen von vorne
        });
    });
});
</script>
';
});

Jetzt wird das Tippen neu gestartet, wenn auf das entsprechende Element geklickt wird, ohne dass die Seite neu geladen werden muss.

Version: 1.3 / HTML-Auszeichnungen wie <br> ausführbar

1. Erkennen und Einfügen von HTML-Tags:
   • Wenn ein < erkannt wird, wird der gesamte HTML-Tag als ein Teil verarbeitet und direkt in den Text eingefügt, ohne ihn als Buchstabe für Buchstabe zu behandeln.
   • Dies erlaubt es, den HTML-Tags <br> zu verwenden, ohne dass sie visuell angezeigt werden. Absäzte wie etwa <p style="margin-top: -10px;"> lassen sich auch darstellen.
2. Originaltext korrekt verarbeiten:
   • Der originalText wird von data-text geholt, der nun auch HTML enthalten kann.
   • Der Effekt läuft weiter, indem er erkennt, wo der HTML-Tag endet, und dann mit dem Rest des Textes weitermacht.
3. Zeilenumbrüche (<br>):
   • Da HTML-Tags wie <br> direkt in den Text eingefügt werden, wird ein Zeilenumbruch genauso gehandhabt, wie er in HTML vorgesehen ist.

/**
 * Erstellt den [ tippen ]-Shortcode.
 * Version: 1.3 / HTML-Auszeichnungen wie (<br>) ausführbar.
 */
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="' . esc_attr($atts['timeout']) . '"></div>';

    return $html;
}

/**
 * Fügt das Script in den Footer ein, das HTML-Tags während des Tippen-Effekts korrekt verarbeitet.
 */
add_action('wp_footer', function () {
    echo '
<script>
document.addEventListener("DOMContentLoaded", function() {
    const typingTimeouts = new Map();

    function tippen(element, index, originalText) {
        const currentSpeed = element.getAttribute("data-speed");

        // Der Text, der gerade angezeigt wird
        let displayedContent = element.innerHTML;

        // Wenn wir das Ende des Textes erreicht haben, beenden wir
        if (index >= originalText.length) {
            return;
        }

        // Zeichenweise den Text durchgehen, aber HTML-Tags direkt einfügen
        let nextChar = originalText[index];

        // Wenn das nächste Zeichen ein "<" ist, erkennen wir ein HTML-Tag und fügen es direkt ein
        if (nextChar === "<") {
            let tagEnd = originalText.indexOf(">", index) + 1; // Finde das Ende des Tags
            let htmlTag = originalText.slice(index, tagEnd); // Hole das vollständige Tag
            element.innerHTML = displayedContent + htmlTag; // Füge das Tag direkt hinzu
            tippen(element, tagEnd, originalText); // Setze den Index nach dem Tag fort
        } else {
            // Normales Zeichen hinzufügen
            element.innerHTML = displayedContent + nextChar;
            index++;
            const timeoutId = setTimeout(function() {
                tippen(element, index, originalText); // Weiter tippen
            }, currentSpeed);
            typingTimeouts.set(element, timeoutId);
        }
    }

    function handleIntersection(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const element = entry.target;
                const timeout = element.getAttribute("data-timeout") || 0;
                const originalText = element.getAttribute("data-text");

                setTimeout(function() {
                    tippen(element, 0, originalText);
                }, timeout);

                observer.unobserve(element); // Stop observing once the animation starts
            }
        });
    }

    const observer = new IntersectionObserver(handleIntersection, {
        threshold: 0.1
    });

    document.querySelectorAll(".tippen").forEach(element => {
        observer.observe(element);

        // Fügt einen Click-Event-Listener hinzu, um das Tippen bei Klick neu zu starten
        element.addEventListener("click", function() {
            if (typingTimeouts.has(element)) {
                clearTimeout(typingTimeouts.get(element));
                typingTimeouts.delete(element);
            }

            element.innerHTML = ""; // Löscht den aktuellen Inhalt
            const originalText = element.getAttribute("data-text");
            tippen(element, 0, originalText); // Startet das Tippen von vorne
        });
    });
});
</script>
';
});

Mit diesem Ansatz können Zeilenumbrüche mit HTML-Tag durch Shift+Enter oder direkt per <br> innerhalb des Textes verwendet, und der Tippen-Effekt wird das korrekt interpretieren und darstellen.

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.

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

Die obigen Code wurden modernisiert und optimiert:

1. Vermeiden von jQuery: Viele moderne WordPress-Themes setzen nicht mehr auf jQuery, um die Ladezeiten und die Performance zu verbessern. Stattdessen wird die native JavaScript-APIs genutzt.
2. Verwenden von IntersectionObserver anstelle von isInViewport: Der IntersectionObserver ist effizienter und performanter, da er die Scroll- und Resize-Events nicht ständig abhört.
3. Verwenden von let und const: Anstelle von var wird let und const verwendet, um Variablen zu definieren, da diese block-scope und somit sicherer sind.

/**
* 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>
';
});

/**
 * 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>
    ';
});

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>

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.

Priorität von CSS

Priorität von CSS: 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

Folgendes ist nur dem Basis-Code "Version 1.1 / Basis-Code" und "Version 1.2.

• Der Version "Version: 1.3 / Zeilenumbruch ist durch Shift+Enter (<br>) ausführbar" wurde das berücksichtigt und ist daher teils obsolet.

Wenn es um die Gestaltung von Text im Tippen-Effikt geht, ist zu beachten, dass HTML-Auszeichnungen wie <br> 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.

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.

Hinweis: Der Version "Version: 3.0 / HTML-Auszeichnungen wie (<br>) ausführbar" wurde das berücksichtigt und daher teils obsolet:

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. Oder den Code der Version 1.3 anwenden, somit ist das einfach mit Zeilenumbruch zu bewerkstelligen.

[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 September