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. Beachte, dass das Skript im Footer der Website platziert wird, um sicherzustellen, dass es nur einmal aufgerufen wird.
/**
* 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 Childs 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;
}Tippen-Effekt im Layout berücksichtigen
CSS-Vorlage für das Layout von Platz:
classes="textgap" CSS-Schablonen
/* Tippeffekt → classes="textgap" */
.textgap1 {
height: 1em;
}
.textgap2 {
height: 2em;
}
.textgap3 {
height: 3em;
}
.textgap3a {
height: 3em;
}
@media all and (min-width: 720px) and (max-width: 1080px)
{
.textgap3a {
height: 6em;
}
}
.textgap4 {
height: 4em;
}
.textgap4a {
height: 4em;
}
@media all and (min-width: 720px) and (max-width: 1080px)
{
.textgap4a {
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;
}
}
@media all and (min-width: 425px) and (max-width: 424px)
{
.textgap7 {
height: 7em;
}
}
.textgap8 {
height: 8em;
}
.textgap9 {
height: 9em;
}
/*.textgap10 {
height: 10em;
}*/
@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;
}
/*textgap13*/
@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> </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.
Katze ipsum dolor
Lesezeit 1 min 20 s.
Ähnliche Hinweise!
- Typewriter Effect
- So zum erst einmal sehr gut! – Getippter Text mit CSS-Animationen.
Aktualisiert im Jahr 2023-April
Wird geladen ...