Typing Effect für Text

Hier so zum Beispiel die Einleitung zum Thema:

Moment mal gleich funktionell …

[tippen speed="50″ timeout="5000″ classes="tippen2″]Als Blickfang mag es hin und wieder ganz nett sein, so Schriftzeichen nach und nach. Visuell so, als würden diese nun gerade getippt. … Ob 'Above the Fold' oder 'Scrolling Viewport' kann das was von Effekt! 🧡[/tippen]

 

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

Der Tippeffekt für die Website

Ob der Aufmerksamkeit zur Info als auch Dekoration. … Dafür ist nur ein PHP-Code in der Theme functions.php und mithin Shortcodes ist der Text nach Belieben 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 Text des Tippeffekts erst Scrollings in den Viewport kommt.

* 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 Typing Effect für Text

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

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

Zum Dankeschön Typing Effect:  Yes! – That’s PHP and JS by Kevin P.
Und der Kommentar des Autors: "Aber ich werde das nicht nutzen, weil ich es grundsätzlich vermeide, zu viel Javascript für solche Spielereien zu verwenden. Bei mir gilt immer: Weniger ist mehr."
Aber aber lieber Autor! – so perfekt ist nichts zur Sache von wegen des zu viel.

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 auch mit  tippen speed="20" oder so.

Der Shortcode zum Typing Effect

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

Mit dabei sind drei Optionen

  • Speed für Tippeffekt
  • Zeitverzögerung zur Ausführung des Codes
  • Individuelles CSS

Somit ist das jedem Bedarf 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 obigen Vorlage 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 gegeben. Siehe 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.

Widget Text und der Tippeffekt

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

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

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

Weiter das Aussehen des Texts ist mit CSS.

Das Textdesign

Die CSS-Class lautet .tippen {}. Die Class "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 werden. Weiter ist das auch mit CSS als Class zu formatieren.

CSS 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 HTML

[[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 */
.tippen3 {
font-size: 18px;
}

Des Texts Tippeffekt den Platz vorbereiten

[tippen speed="5″]Im Content wirkt das normal, wenn des Texts des Effekts infolge darunter die Zeilen hinab gleiten. Oder so den Platzbedarf vorzubereiten, schön für so kurzen Text, wie es eingangs hier im Beitrag ist. Den Tippeffekt im Widget 'Text' sollte immer vorab der Platz da sein, welchen der Text da werden wird … Eben kann das auch im Content mal von nutzen sein. Der Bereich ist mit CSS freizustellen.[/tippen]

CSS die Class für den Platz

/* Typing Effect Joker */
.textgap { 
height: 10em; 
}

HTML das div mit Class und der Shortcode

<div class="textgap">[[tippen speed="50" timeout="1500"]… Das n e tt e Tun(ING) für&nbsp; die Website[/tippen]]</div>

Somit der Eingabe im Widget 'Text' ist der Raum für den Text da und wirkt dann nur ruhig und schön!

Start Tippeffekts Scrollings im Viewport

Der Tippeffekt startet immer im Viewport.

Zum Fallbeispiel

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.

Hier dann mit timeout="3000". Also Tippeffekts im sichtbaren Bereich startet der Typing Effect nach 3 s.

 <h4>Katze ipsum dolor</h4>
Lesezeit 1 min 20 s.
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">
<div class="textgap4">[[tippen speed="10" timeout="3000"]… Versuchen sie nicht, altes futter mit neuem zu mischen, um zu täuschen! … [/tippen]]</div>
</div>
</div>

Katze ipsum dolor

Lesezeit 1 min 20 s.

[tippen speed="10″ timeout="3000″]… Versuchen sie nicht, altes futter mit neuem zu mischen, um zu täuschen! Dafür leckt mieze dann mit sandpapierzunge. Mag dann spielen und sich im kreis drehen und so auf der couch herumspringen. Nach futtern dann schnurren und entspannen. Sieht einen vogel, starrt ihn an, komme her vögelchen. Nyan nyan macht die katze, scraaaaape scraaaape macht die wand, wenn sie ihre krallen spitzt. Trägt sorge dafür, dass du nicht schlafen kannst, dafür schläft die katz tagsüber wieder und wieder. Nebenher mal vorhänge hochklettert. – "oder so lege mir katzenminze in meinen baum". Wieder ärgert, bis es fisch gibt miau. Du liegst entspannt auf der couch, samtpfötchen springt auf deinen bauch, schnüffelt in deinem gesicht und fordert streicheln. – bist du nicht willig, so gibs der kralle … Fühlt sich gut an, du bist ein gefangenes publikum, belohnt den auserwählten mit einem langsamen blinzeln und schnurren. Lässt dich nicht mehr aufstehen. Katze ist liebe, katze ist leben fressen und dann schlafen. Knurrt hunde im schlaf an. Katzen sind süß, ganz miau. Betatscht käfer und frisst sie, bevor er wegkommt. Mieze rennt zum rasenden angriff auf die maus. "Doch sehe ich nicht süß aus? …". Lass mich rein lass mich raus lass mich rein lass mich raus. Wer hat diese tür überhaupt kaputtgemacht.[/tippen]

Was sagst Du zum Beitrag?