Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
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.
* 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 ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beitrag 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]
speed="50"
ist optional und nach Vorlage schon gesetzt. Geht also auch so:[tippen]Mein Text der getippt werden soll![/tippen]
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.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
-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 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
↵*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.
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.
Ä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.
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 …
- https://www.typeitjs.com/licenses/
- Für TypeIt stehen zwei Arten von Lizenzen zur Verfügung: eine Open-Source-Lizenz, eine eingeschränkte kommerzielle Lizenz und eine unbegrenzte kommerzielle Lizenz.
- https://www.typeitjs.com/docs/wordpress/
- https://www.typeitjs.com/docs/vanilla/usage/#configuration-options
NAME UND STANDARDWERT | BESCHREIBUNG |
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, nextStringDelay wird 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