Text tipp Effekt

**Trietop** · 08.09.2010, 11:32

Sehr geehrte Community von Free-Hack,

heute möchte ich euch ein kleines aber feines Javascript vorstellen, mit dem man ein "Typing Effect" erstellen kann.

Outcome: http://semtex-gaming.de/hack/ (Änderungen des CSS Codes nicht im folgenden Code vorhanden.)

Der Code sieht am Ende folgender Maßen aus:

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
var text="content of text here";
var delay=50;
var currentChar=1;
var destination="[not defined]";

function type()
{
  if (document.getElementById)
  {
    var dest=document.getElementById(destination);
    if (dest)
    {
      dest.innerHTML=text.substr(0, currentChar);
      currentChar++
      if (currentChar>text.length)
      {
        currentChar=1;
        setTimeout("type()", 5000);
      }
      else
      {
        setTimeout("type()", delay);
      }
    }
  }
}
function startTyping(textParam, delayParam, destinationParam)
{
  text=textParam;
  delay=delayParam;
  currentChar=1;
  destination=destinationParam;
  type();
}

//-->
</SCRIPT>
<title>JavaScript Typing Effect</title>
</head>
<body>
<DIV ID="textDestination">content of text here</DIV>
</body>
<SCRIPT LANGUAGE="JavaScript">
<!--
startTyping(text, 50, "textDestination");
//-->

</html>

---------------------------------------------------------------------------------

Schauen wir uns zu nächst mal den JavaScript Code an:

Code:

var text="Content of text here";
var delay=50;
var currentChar=1;
var destination="[not defined]";

Die 4 Variablen im oberen TEil des Codes sind globale Variablen.
Die erste Variable enthält den Text, der angezeigt wird.
Die zweite ist die Verzögerung (in Millisekunden) zwischen der Eingabe der Buchstaben.
Die dritte Variable ist ein Zähler, der angibt bei welchem Buchstaben das Schreiben anfangen soll.

Zum Beispiel: Wenn der Bildschirm "Da" anzeigt, dann wird die dritte Variable "2" sein, weil wir 2 Zeichen gezeigt haben.

Die letzte Variable enthält den Namen des Elements (DIV-Tags) wo der Text eingetippt werden soll.

Mehr braucht ihr zum JavaScript im Prinzip auch gar nicht wissen.
Ansonsten einfach ausprobieren was was ist. Wenn man ein bisschen Englisch kann sollte man das Script verstehen.

---------------------------------------------------------------------------------

Jetzt gucken wir uns den Content an und das zweite JavaScript:

Code:

<title>JavaScript Typing Effect</title>
</head>
<body>
<DIV ID="textDestination">content of text here</DIV>
</body>
<SCRIPT LANGUAGE="JavaScript">
<!--
startTyping(text, 50, "textDestination");
//-->

Das ist ein sehr simpler HTML-Code verbunden mit einem JavaScript.
Der Title stellt später die "Überschrift" im Browserfenster da.

Kommen wir zum DIV-Code.
Der DIV-Code gibt an, wo der Text angezeigt werden soll und logischerweise die ID, die wir bereits festgelegt haben.

"Content of text here" muss sowohl als im JavaScript als auch im Body gleich sein, da ansonsten erst der Text komplett angezeigt wird und das JavaScript dann erst anfängt zu tippen.

Das JavaScript am Ende startet lediglich das Tippen.
Ohne diese Angabe funktioniert das Script NICHT!

---------------------------------------------------------------------------------

Bei Fehlern im Code oder anderen Anregungen meldet euch bitte bei mir.

Mit freundliche Grüßen
Trietop

**conrado** · 11.09.2010, 17:12

ist alt....
habs vor jahren schon gefunden...

Glaube auf google:

Javascript Matrix effect

aber is immer wieder geill...

(man könnte auch nen timer verwenden... )

**hersch24** · 13.09.2010, 16:18

ich hab sowas mal in SVG geschrieben. JS is alt und wird auch schon seit jahren zum defacen benutzt. Aber trotzdem schön das du das gemacht hast.

**wacked** · 14.09.2010, 18:58

Jetzt einfach aus dem bauch nochmal in kurz

Code:

<script>
var string = "aaaaaaaaaaa";
var desti = "afpafjp";
function type(charpos)
{
    if(string[charpos] != undefined)
    {
        document.getElementById(destination).innerHTML += string[charpos];
        type(++charpos);
    }
}
type(0);
</script>
<DIV ID="afpafjp"></DIV>

**Trietop** · 15.09.2010, 10:15

Zitat von hersch24

ich hab sowas mal in SVG geschrieben. JS is alt und wird auch schon seit jahren zum defacen benutzt. Aber trotzdem schön das du das gemacht hast.

Mach doch nen Tutorial dazu ;-)
Würde ich mich drüber freuen

Zitat von wacked

Jetzt einfach aus dem bauch nochmal in kurz

Code:

<script>
var string = "aaaaaaaaaaa";
var desti = "afpafjp";
function type(charpos)
{
    if(string[charpos] != undefined)
    {
        document.getElementById(destination).innerHTML += string[charpos];
        type(++charpos);
    }
}
type(0);
</script>
<DIV ID="afpafjp"></DIV>

Kann das jetzt nicht ausprobieren aber ist nicht wirklich nen Tutorial.
Würde kein Anfänger verstehen also total unnötig!

MFG-Trietop-

Thema: Text tipp Effekt

Themen-Optionen

Anzeige

Text tipp Effekt

Ähnliche Themen

PC tipp......

Schrift tipp..

Allgemeiner Tipp

Text Effekt mit Fireworks 8

Stichworte

Berechtigungen