Text Wheel 2: Kostenlose DHTML und JavaScript Text Animationen

Text Wheel 2

Rundum rund - so sind sie eben, meine Texte. Made for IE 5x/6x. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

Schritt 1: Öffnen Sie die Webpage, die mit einem Text Wheel belebt werden soll. Benutzen Sie am besten einen simplen Texteditor wie z.B. NotePad oder WordPad.

Schritt 2: Fügen Sie den folgenden Code direkt obergalb des </body>-tags ein:

// 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 die URL's der Bilder ein, welche Ihre Buchstaben füllen
// Anzahl nach Belieben
var pic=new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")

// Tragen Sie Ihre (möglichst kurzen) Nachrichten ein.
// Jede Nachricht muss durch Anführungs- und Schlusszeichen eingerahmt werden
// Sie können soviele Nachrichten eingeben, wie Sie wollen
var message=new Array("Köpfe verdrehen", "Mächtig aufdrehen","Konkurrenz abdrehen", "Manchmal durchdrehen", "Das ist Texten")

// Bestimmen Sie die Schrift
var fnt="COMIC SANS MS"

// Bestimmen Sie die Breite der Textbox (Pixels)
var formwidth=600

// Bestimmen Sie die Farbe des 3D-Effekts
var fillcolor="#666666"

// Bestimmen Sie die Dicke des 3D-Effekts (Pixels)
var backdepth=6

// Legen Sie das Tempo der Drehbewegung
// Mögliche Werte sind: 1,2,5,10,25
var speed=10

// Bestimmen Sie den Füllefekt
// Mögliche Werte sind: "frame" or "tile" or "pattern"
var filltype="frame"

// Bestimmen Sie die Pause zwischen den Drehbewegungen (Sekunden)
var pause=2

// Soll Text Wheel unsichtbar werden, nachdem alle Nachrichten gezeigt wurden?
// Tragen Sie "true" oder "false" ein
var stopafterdisplay=false

// So legen Sie die vertikale Position fest:
// Tragen Sie "middle" ein, um Text Wheel einzumitten
// ODER tragen Sie einen beliebigen Pixel-Wert ein
var postop=120

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

var opacity="100%"
var circlemark=" "
var i_angle1=0
var i_pic=0
var i_message=0
var posleft=0
var pagewidth
var pageheight
var longestmessage=0
var emptyspace=" "
var flagstarted=false
pause*=1000

var opera=navigator.userAgent.match(/Opera/) 
var ie5=document.getElementById&&document.all&&!opera?1:0

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

for (i=0;i<=message.length-1;i++) {
	var emptyspace=""
	var i_emptyspace=(longestmessage-message[i].length)/2
	for (ii=0;ii<=i_emptyspace;ii++) {
		emptyspace+=circlemark
	}
	message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function initform() {
	pagewidth=document.body.clientWidth
	pageheight=document.body.clientHeight
	posleft=(pagewidth-formwidth)/2
	if (postop=="middle") {
		postop=pageheight/2
	}
	document.getElementById('rectid').style.left=posleft
	document.getElementById('rectid').style.top=postop
	preload()
}
function preload() {
	var i_preload=0
	for (i=0;i<=pic.length-1;i++) {
		var imgref=eval("document.n"+i)
		if (imgref.complete) {i_preload++}
	}
	if (i_preload>=pic.length-1) {
		window.status=i_preload
		var timer=setTimeout("changeform()",pause)
	}
	else {
		var timer=setTimeout("preload()",50)
	}
}

function changeform() {
	i_angle1+=speed
	if (i_angle1==360) {
		pausenow()
	}
	else {
		if (i_angle1==250) {
			i_pic++
			i_message++
			if (i_pic>=pic.length) {i_pic=0}
			if (i_message>=message.length) {i_message=0}
			document.getElementById('fillid').src=pic[i_pic]
			document.getElementById('textpathid').string=message[i_message]
			flagstarted=true
		}
		document.getElementById('extrusionid').rotationangle=0+","+i_angle1
		if (stopafterdisplay && i_message==0 && flagstarted) {
			document.getElementById('textpathid').string=""
		}
		else {
			var timer=setTimeout("changeform()",20)
		}
	}
}

function pausenow() {
	i_angle1=0
	document.getElementById('extrusionid').rotationangle=0+","+i_angle1
	var timerendpause=setTimeout("changeform()",pause)
}

if (ie5) {
	document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
	for (i=0;i<=pic.length-1;i++) {
		document.write('<img src="'+pic[i]+'" name="n'+i+'" width=1 height=1>')
	}
	document.write('</div>')
   	document.write('<v:curve id="rectid" strokeweight="2pt" style="position:absolute;" from="0,0" to="'+formwidth+',0.1">')
   	document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" backdepth="'+backdepth+'" diffusity="2.5" metal="true"/>')
 document.write('<v:fill id="fillid" opacity="'+opacity+'" color="'+fillcolor+'" type="'+filltype+'" src="'+pic[0]+'"/>')
	document.write('<v:path textpathok="t"/>')
	document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string="'+message[i_message]+'"/>')
   	document.write('</v:curve>')
	window.onload=initform
   }
</script>

Schritt 3: Fügen Sie den folgenden Code in den Head-Teil Ihrer Webpage ein:

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

Schritt 4: Beten Sie!

back