Tippen-Effekt! – der 1-ne.
Das ist sofort prägnant

Bild ‘Mag ich!’ – von geralt
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; 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
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Die Einleitung zum Schreibmaschinen-Effekt auch Tippen-Effekt, Typing Effect oder Typewriter Effect hier gleich mit Beispiel

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

Der Tippen-Effekt für die Website

Das ist zur Aufmerksamkeit ob zur Info als auch Dekoration. Für den Tippen-Effekt ist ein PHP-Code in der Theme functions.php und mithin Shortcodes ist der Text nach Belieben auf der Website einzubetten. Weiter mag das auch mit CSS so ganz passend eingerichtet sein. Der Tippeffekt startet bei Besuch der Website, so für Above the Fold* als auch wenn der Text des Tippeffekts Scrollings in den Viewport kommt.

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.

 Der PHP-Code Tippen-Effekt 

Der Code für die Theme functions.php samt Javascript.

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

Zum Dankeschön Tippen-Effekt: Das JS ist von WP-Freund. – und weiter gut Deutsch “Betreff Performanz ist JavaScript mit bedacht einzusetzen”

Oder so als ZIP herunterladen (2 KB). – des Codes für die Theme functions.php ist da dann das <?php oben zu entfernen.

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme? – zum Beitrag mit Childs Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Das der Zeile oben mit 'speed' => 50,, 50 steht für Millisekunden. Also die Zeit, die das Script für einzelnen Buchstaben nutzt. Wobei des Effekts dann je kleiner die Zahl, desto schneller der Tippeffekt. Im Schnitt ist da so mit 50 die Vorlage.

Für Rasantes ist das Shortcodes mit  tippen speed="20" oder so.

 Der Shortcode zum Tippen-Effekt 

Es sind per Seite mehrere Shortcodes zum Tippen-Effekt erlaubt. Bspw ist da für Widget ein Tippeffekt so ist auch jeder Seite im Content ein Tippeffekt oder mehr zu handhaben.

Mit dabei sind drei Optionen

Somit ist das jedem Bedarf.

  • Speed für Tippeffekt
  • Zeitverzögerung zur Ausführung des Codes
  • Individuelles CSS
 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" Delay scroll start ist optional in Millisekunden (das sind hier im Beispiel 1,5 s). Also das ist die Zeitverzögerung zur Ausführung des Codes. Für ober der Falz ist das die Zeit nach dem Aufruf der Website und Scrollings, ab dort der Text des Tippeffekts im Viewport ist.
  3. classes="tippen" ist optional. Gleich von classes sind Schriften und CSS zu geben. Siehe unterhalb “Textdesign”.

Akkurat ist das mit dem Text

Eine HTML-Auszeichnung also mit Elementen wie <strong>, <a href… usw. auch ‘Enter’ für Absatz oder ‘Shift / Enter’ für Zeilenumbruch ist da nicht zu machen, da das HTML dem Text visuell ist, – weil alles hier an HTML als ‘Character’ zählt.

Für etwaig Leerzeichen des mehr geht das &nbsp;. Nach Umschalten auf Modus ‘Visuell’ und zurück ‘Text’ ist zwar das geschützte Leerzeichen selbst nicht mehr zu sehen und bleibt doch als Leerzeichen.

Das Textdesign

Die CSS-Class lautet .tippen {}. Die Classes tippen ist immer da, damit das Script funktioniert. Ohne weitere CSS Zuweisung ist das so wie das CSS des Themes ist und braucht im Shortcode nicht Ausgezeichnet sein. Weiter ist das auch mit CSS als Class zu formatieren.

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 im Editor Visuell

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

An und für sich könnte jedem  Shortcode eigene Class sein:

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

Des Tippen-Effekts den Platz geben

CSS die Class für den Platz

classes="textgap" CSS-Schablonen
/* Tippeffekt → classes="textgap" */
.textgap1 { 
    height: 1em;
}

.textgap2 { 
    height: 2em;
}

.textgap3 { 
    height: 3em;
}

.textgap4 { 
    height: 4em;
}

.textgap6 { 
    height: 6em;
}

.textgap8 { 
    height: 8em;
}

.textgap10 { 
    height: 10em;
}

.textgap15 { 
    height: 15em;
}

.textgap33 { 
    height: 33em;
}
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 dem Beispiel Seitenleiste links ganz oben.

Zum Responsiv so Tabletcomuputer

Das nun ist nur so Beispiel falls es sich für das Theme so ergibt.

Das Beispiels hier mit ‘Twenty Fourteen’ Theme und stehend von Tabletcomputer ist die Seitenleiste links weg, die rechterseits ist. Weiter passt da der Seitenleiste die Responsion des normalen Platzhalters nicht.

Folgend sind zwei CSS-Classen in einem. Die eine ist für die Ansicht normal und die andere ist zur Responsion mit ‘Media Query’. Also beide haben selben Selektor mit andern Deklarationswert.

  1. Im Ersten ist das bspw mit Class textgap3a für Desktop und Handy und das passt der Responsion.
  2. Im Zweiten ist das mit sogenannten “Media Query”. Das ist für Tabletcomputer bzw. Displays mit Breite ab 720px bis 1080px die Höhe statt 3em auf 6em. – und das passt so weit.

Also der Form müssen die beiden von selben Class der Höhe unterschiedlich sein:

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

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

Der Tippen-Effekt und der Zeilensprung

Wenn ein Buchstabe von Wort so am Ender der Zeile darüber beginnt, hüpft dieser dann doch zur nächst Zeile. Welches so im Content eventuell nicht so auffällt, ist in kleinem Bereich wie Widget darauf sehr zu achten.

Bspw Modus ‘Text’ … Das n e tt e↵* Tun(ING) für &nbsp; ↵*die Website. Das &nbsp; ist auch mehrfach hintereinander anwendbar … Das kann also von nutzen sein, wenn mal so Zeilenumbruch pseudo sein soll.

*Das Enterzeichen ↵ ist nur zur Veranschaulichung für dort wo sich der Zeilenumbruch von selbst ergibt.

Bsp “Start Tippen-Effekt Scrollings im Viewport”

Der Tippeffekt startet immer im Viewport. Also Tippeffekts das im sichtbaren Bereich startet der Typing Effect hier nach 2 s.

 <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>
</div>

Der Start folgt ‘Scrolling im Viewport’ und der Text ist hier in einem Scroller. Weiter ist dem Tippeffekt durch Class der Platz vorbereitet. Also hiermit ist das nach unten Gleiten des folgenden Contents nicht und der Platzbedarf ist durch den Scroller 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.

Ähnlicher Hinweis!


Aktualisiert im Jahr 2022-Juni

Hat dir der Beitrag was gebracht!
Und ist zum Lesen gut gemacht?