Text Snake: Kostenlose DHTML und JavaScript Text Animationen

Text Snake

So verführerisch wie Schlangen eben sein können. Farbe und Schriftattribute etc. lassen sich leicht anpassen. Funktioniert mit IE 5x/6x, NS 4x/6x/7x. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

Schritt 1: Öffnen Sie die Webpage, in die Sie die Message Box einbinden möchten. Benützen Sie dazu einen simplen Texteditor wie z.B. NotePad oder WordPad.

Schritt 2: Kopieren Sie den folgenden Code und fügen Sie ihn direkt unterhalb des <body>-tags ein:

<SCRIPT>
// CREDITS:
// Text Snake
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2002 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// info@24fun.com
// 8/31/2002

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

/////////////////////////////////////////////////////////////////////
// Unterhalb dieser zwei Linien beginnt die Editierzone
// Bestimmen Sie die Eigenschaften der Text-Animation 
/////////////////////////////////////////////////////////////////////

// Tragen Sie soviele Messages ein, wie Sie wollen.
// Die Messages werden durch Kommas voneinander getrennt.
// Jede Message wird von Anführungszeichen umrahmt.
var text=new Array("Werbebriefe ab Fr. 300.--","Prospekte ab Fr. 400.--","Inserate ab Fr. 200.--")

// Bestimmen Sie die Schriftart
var textfont="Arial"

// Bestimmen Sie die Schriftgrösse
var textfontsize=12

// Bestimmen Sie die Schriftfarbe
var textcolor="#000000"

// Bestimmen Sie die Pause zwischen den einzelnen Nachrichten (Sekunden)
var textpause=2

/////////////////////////////////////////////////////////////////////
// Hier endet die Editierzone
// Bitte ändern Sie den nachfolgenden Programmiercode nur,
// wenn Sie ein geübter JavaScripter sind.
/////////////////////////////////////////////////////////////////////

var textweight="normal"
var textweightA="<b>"
var textweightB="</b>"
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textpause=2000
var windowwidthOri=330
var windowheightOri=250
var textfontsizeHTML=3
var spanwidth=new Array()
var i_colors=0
var letterspace=Math.floor(textfontsize/1.5)
var tickerleft=textpath[textpath.length-2]
var tickertop=textpath[textpath.length-1]
var timer
var finalxpos=tickerleft
var i_text=0
var textsage=""
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var message=new Array()

var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0

textpause*=1000

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
	xpos[i]=5000
}

var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
	ypos[i]=5000
}

function randomizer(range) {		
	return Math.floor(range*Math.random())
}

if (ie) {
	document.write("<div id='roof' style='position:relative;overflow:hidden'>")
	for (i=0;i<=maxtextlength;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute'>")
		document.write(textsage)
    	document.write("</span>")
	}
	document.write("</div>")
	window.onload=resettextpath
}
if (ns6) {
	for (i=0;i<=maxtextlength;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute'>")
		document.write(textsage)
    	document.write("</span>")
	}
	window.onload=resettextpath
}
if (ns4) {
	for (i=0;i<=maxtextlength;i++) {
    	document.write("<layer name='span"+i+"' visibility=hide>")
		document.write(textsage)
    	document.write("</layer>")
	}
	window.onload=resettextpath
}
</script>

Schritt 3: Konfigurieren Sie die Eigenschaften Ihrer Text Animation im oberen Teil des Codes, den Sie soeben eingefügt haben.

back