Buchstaben nach und nach erscheinen lassen?

TheOnly1 · 27 Juli 2013

Tach!

Ich suche aktuell nach einer Möglichkeit normalen Text auf einer HTML oder PHP Seite "nach und nach erscheinen" zu lassen.
So wie man es aus den alten Hackerfilmen kennt. Es soll also so aussehen, als ob der Text gerade "live" geschrieben wird.
Ich hoffe es ist klar, was ich meine.
Ideal wäre HTML/CSS/JavaScript oder PHP als Basis. Das Ganze soll nämlich auch auf Smartphones problemlos laufen.

Jemand ne Idee dazu?

Kugelfisch · 27 Juli 2013

Per JavaScript ist das ohne Weiteres möglich. Mit Stichwörtern wie javascript typewriter animation findest du diverse fertige Implementierungen, u.a. das jQuery-Plugin http://onehackoranother.com/projects/jquery/jquery-grab-bag/text-effects.html.

TheOnly1 · 27 Juli 2013

Vielen Dank.
Ich hatte JavaScript schon "im Verdacht" für sowas, aber mir hat der richtige Suchbegriff dafür gefehlt.

p3Eq · 27 Juli 2013

Vermutlich ist mein Hinweis für dich überflüssig, aber dennoch merke ich noch an, dass du eine Fallback-Variante für Nicht-JavaScript-Nutzer implementieren solltest, sofern der dargestellte Text von Relevanz für deine Seite ist. Viele Implementierungen in JavaScript vergessen das oft...

Ein kurzes und exemplarisches Script könnte so aussehen:

HTML:

<!doctype html>
<html>
    <head>
        <script>
            var i = 1;
            var text;

            function triggerTypewriter() {
                text = document.getElementById('text').innerHTML;
                typewriter();
            }

            function typewriter() {
                if(i <= text.length) {
                    var e = document.getElementById('text');
                    e.innerHTML = text.substr(0, i) + "_";
                    i++;
                    window.setTimeout(typewriter, 100);
                }
            }
        </script>
    </head>
    <body onload="triggerTypewriter();">
        <div id="text">Hier steht ein exemplarischer Text.</div>
    </body>
</html>

maeex · 6 Aug. 2013

Ist das nicht auch mit CSS3 möglich?
Meine da mal etwas gesehen zu haben.

RedParkz · 9 Aug. 2013

jo http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/ jquery macht aber m.E. einen schöneren Effekt

gelöschter Benutzer · 9 Aug. 2013

Intressanter Thread!

Habe auch das von p3Eq zitierte Script schon länger auf einer vor-sich-hin-gammel-Seite. Macht was es soll, allerdings wirkt es halt recht statisch, da der zeitliche Abstand immer identisch ist und keine Vertipper vorkommen.

Jetzt die Frage an die Experten für den nächsten Level: ich habe mal irgendwo sowas ähnliches gesehen, nur da wirkte es realistischer weil Vertipper eingebaut wurden und diese dann per Backspace wieder korrigiert wurden. Das mit einer variablen Zeitspanne zwischen den Buchstaben bekomme ich ja noch selber hin, aber wie könnte man nett einen Backspace emulieren? Bin leider nicht der Java/WWW Coder vor dem Herren.

alter_Bekannter · 9 Aug. 2013

Oder ganz hässlich mit einem sich ständig neu ladenden iframe ohne Javascript, aber vermutlich so Praxis untauglich das es höchstens als Gedankenspielerei taugt, wobei ein bischen Plain Text heute wohl kaum mehr ein Probleme darstellen sollte, nicht mal bei mobilem Internet.

Inhalt mit einem Hiddenfield bei jedem Request mitschicken und das Serverseitige Skript kann bei jedem refresh einen Buchstaben anhängen. Weit weg von jeglicher klassischer Empfehlung, aber würde überall ohne JS funktionieren. Kann man ifram Inahlte mit Stylesheets der Seite in die sie eingebettet sind beeinflussen? Ist wie gesagt alles nur so eine theoretische Spielerei die mir gerade eingefallen ist, hab sowas noch nicht probiert.

Der Ansatz würde auch nachträgliches entfernen von Buchstaben unterstützen. Muss ja eh immer alles neu geladen werden und durch das Hiddenfield ist alles ne voll verfügbare Variable in PHP.

Edit:
Hab verpennt das Hiddenfields ein Form Submit erfordern, also doch Javascript erforderlich.

Kugelfisch · 10 Aug. 2013

Finntastisch schrieb:
wie könnte man nett einen Backspace emulieren?

Indem du das letzte Zeichen des Texts mittels substr() oder einer vergleichbaren Funktion abschneidest. Konkret musst du, wenn du einen Vertipper generiert hast, eine Variable setzen, damit das beim nächsten Aufruf deiner Typewriter-Funktion geschieht.

Ein Ansatz, der ohne JavaScript und CSS auskommt, wäre übrigens, den Server die Daten zeichenweise ausliefern zu lassen und das progessive Rendering verbreiteter Browser auszunutzen. Um bei der von alter_Bekannter vorgeschlagenen Lösung ein verstecktes Formularfeld und damit die JavaScript-Abhängigkeit zu vermeiden, könnte man stattdessen Cookies einsetzen.

evillive · 10 Aug. 2013

ist nicht perfekt aber läuft:
[src=javascript]

<!doctype html>
<html>
<head>
<script>
var i = 1;
var text;
var f = 0;

function triggerTypewriter() {
text = document.getElementById('text').innerHTML;
typewriter();
}

function typewriter() {
if(i <= text.length) {
var e = document.getElementById('text');
var a = Math.floor((Math.random()*5)+1);
if (f > 0) {
a = 1;
f--;
} else {
if(a == 5)
{
x = typingError(text.charAt(i));
i--;
e.innerHTML = text.substr(0, i) + x + "_";
f++;
} else {
e.innerHTML = text.substr(0, i) + "_";
i++;
}
}
a *= 100;
window.setTimeout(typewriter, a);
}
}

function typingError(p)
{
var arr = "abcdefghijklmnopqrstufwxyz";
var i;
do {
i = Math.floor((Math.random()*arr.length));
q = arr.charAt(i);
} while (q == p);
return q;
}
</script>
</head>
<body onload="triggerTypewriter();">
<div id="text">Hier steht ein exemplarischer Text.</div>
</body>
</html> [/src]

edit
Einrückung

alter_Bekannter · 10 Aug. 2013

Stimmt, Cookies hab ich nicht bedacht, die werden immer übertragen, egal ob Form oder nicht.

Allerdings habe ich festgestellt das Browser es nicht mögen über länger Zeit eine Seite zu laden weil die Ausgabe aus einer extrem langen Schleife kommt, könnte in den konkreten Szenarien aber auch an der schlichten Menge der Daten gelegene haben, ist jetzt allerdings schon ein paar Jährchen her. Ansonsten hätte das wohl viele Vorteile von Clientseite, wenn auch erheblich Serverlastiger oder nicht? Ich meine Wartezeiten über sleep() in PHP + das ewige Aufrechterhalten der Verbindung wäre nicht sehr hübsch oder? Obs Probleme macht weiss ich allerdings nicht. Außerdemn könnte auch das wieder keine Zeichen entfernen.

Exterminans · 10 Aug. 2013

Es gibt natürlich auch eine Lösung die ohne Javascript oder CSS auskommt, sondern alleinig auf einigen Features des http-Standards beruht:
[src=php]<?php
header('Content-type: multipart/x-mixed-replace;boundary=endofsection');
print "\n--endofsection\n";

$pmt = array("-", "\\", "|", "/" );
for( $i = 0; $i <100; $i ++ ){
usleep(100000);
print "Content-type: text/plain\n\n";
printf("Part [%3d]\n".$pmt[$i % 4]."\t", $i);
echo '[';
for($j = 0; $j < $i; $j++) {
echo '#';
}
for($j = $i; $j < 100; $j++) {
echo '-';
}
echo ']';
print "--endofsection\n";
ob_flush();
flush();
}
print "Content-type: text/plain\n\n";
print "The end\n";
print "--endofsection--\n";
?>
[/src]

Leider ist die Unterstützung dafür allerdings nicht in allen Browsern vollständig, insbesondere Chrome ist da auf einigen Plattformen zickig.

Buchstaben nach und nach erscheinen lassen?

TheOnly1

RBTV | ngb | BMG

Kugelfisch

Nerd

TheOnly1

RBTV | ngb | BMG

p3Eq

zu nichts zu gebrauchen

maeex

Neu angemeldet

RedParkz

Neu angemeldet

gelöschter Benutzer

Guest

alter_Bekannter

N.A.C.J.A.C.

Kugelfisch

Nerd

evillive

EXIL

alter_Bekannter

N.A.C.J.A.C.

Exterminans

Neu angemeldet