Buchstaben nach und nach erscheinen lassen?

Jump to last post
TheOnly1

TheOnly1

RBTV | ngb | BMG
Registriert
14 Juli 2013
Beiträge
4.150
Ort
Zimmer 237
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?
 
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
You do not have permission to view link please Anmelden or Registrieren
.
 
  • Thread Starter Thread Starter
  • #3
Vielen Dank.
Ich hatte JavaScript schon "im Verdacht" für sowas, aber mir hat der richtige Suchbegriff dafür gefehlt.
 
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:
Expand Collapse Copy 
<!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>
 
Zuletzt bearbeitet von einem Moderator:
Ist das nicht auch mit CSS3 möglich?
Meine da mal etwas gesehen zu haben.
 
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.
 
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.
 
Zuletzt bearbeitet:
Finntastisch schrieb:
wie könnte man nett einen Backspace emulieren?
Zum Vergrößern anklicken....
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.
 
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
 
Zuletzt bearbeitet:
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.
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben