Magnet Ticker: Kostenlose DHTML und JavaScript Text Animationen

Text Magnet

Anziehender können Sie Ihre Botschaft nicht in Szene setzen. Grösse, Rand, Farbe, Schriftattribute etc. lassen sich leicht Ihrem Corporate Design 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, die Sie mit einem Text Magnet aufmotzen möchten. Benutzen Sie am besten einen simplen Texteditor wie z.B. NotePad oder WordPad.

Schritt 2: Kopieren Sie den folgenden Code und fügen sie ihn direkt über dem </body>-tag ein:

<SCRIPT>
// CREDITS:
// Letter Magnet
// By 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

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

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

// Fügen Sie soviele Messages ein, wie Sie wollen, aber immer hübsch
// von Anführungszeichen umrahmt und durch Komma voneinander getrennt
var text=new Array("Werbebriefe ab Fr. 300.--", "Inserate ab Fr. 200.--","Prospekte ab Fr. 400.--")

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

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

// Setzen Sie "bold" für fette Schrift und "normal " für normale
var textweight="normal"

// Setzen Sie "italic" für kursive Schrift und "normal " für normale
var textitalic="normal"

// Konfigurieren Sie die Pause zwischen den einzelnen Messages (Sekunden)
var textpause=2

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

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

var textalignabsolute="topcenter"
var letterwidth=new Array()
var textfontsizeHTML=2
var messagewidth=0
var messageheight=0
var i_colors=0
var letterspace=Math.floor(textfontsize/1.5)
var timer
var i_text=0
var textsplitted
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 startposmax_x=0
var startposmax_y=0

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
var message=new Array()

textpause*=1000

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

for (i=0;i<=text.length-1;i++) {
	if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
	message[i]=text[i]+" "
}

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())
}

function getpagesize() {
	if (ie) {
		windowheight=parseInt(document.body.clientHeight)
		windowwidth=parseInt(document.body.clientWidth)
	}
	if (ns4 || ns6) {
		windowheight=parseInt(window.innerHeight)
		windowwidth=parseInt(window.innerWidth)
	}
	startposmax_x=windowwidth-2*parseInt(textfontsize)
	startposmax_y=windowheight-2*parseInt(textfontsize)

changecontent()
}

function gotoendpos() {
	if (ie) {
		if (i_loop<=textsplitted.length-1) {
			var thisspan=eval("document.all.span"+i_loop+".style")
			thisspan.posLeft=-1000
			i_loop++
			var timer=setTimeout("gotoendpos()",10)
		}
		else {
			clearTimeout(timer)
			i_loop=0
			var timer=setTimeout("changecontent()",400)
		}
	}
	if (ns4) {
		if (i_loop<=textsplitted.length-1) {
			var thisspan=eval("document.span"+i_loop)
			thisspan.left=-1000
			i_loop++
			var timer=setTimeout("gotoendpos()",10)
		}
		else {
			clearTimeout(timer)
			i_loop=0
			changecontent()
		}
	}
	
	if (ns6) {
		if (i_loop<=textsplitted.length-1) {
			var thisspan=eval("document.getElementById('span'+i_loop).style")
			thisspan.left=-1000
			i_loop++
			var timer=setTimeout("gotoendpos()",10)
		}
		else {
			clearTimeout(timer)
			i_loop=0
			changecontent()
		}
	}
}

if (ie) {
	for (i=0;i<=maxtextlength;i++) {
 	document.write("")
		
 	document.write("")
	}
	window.onload=getpagesize
}
if (ns6) {
	for (i=0;i<=maxtextlength;i++) {
 	document.write("")
		document.write(textsplitted)
 	document.write("")
	}
	window.onload=getpagesize
}
if (ns4) {
	for (i=0;i<=maxtextlength;i++) {
 	document.write("<layer name='span"+i+"' visibility=hide>")
		document.write(textsplitted)
 	document.write("</layer>")
	}
	window.onload=getpagesize
}
</script>

Schritt 3: Konfigurieren Sie Schriftattribute etc. im oberen Teil des Codes, den Sie soeben eingefügt haben.

Schritt 4: Beten Sie!

back