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:
<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:
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:
<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
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:
<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:
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:
<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