Fade Scroller: Kostenlose DHTML und JavaScript Text Animationen

Fade Scroller

Scroller-Scripts gibt's wie Sand am Meer. Aber nur eines hat einen solch neckischen Ein- und Ausblendeffekt. Funktioniert mit IE 5x/6x. NS 6x/7x zeigt Scroller ohne Überblendeffekt. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

Schritt 1: Öffnen Sie die Webpage, worin Sie den Scroller einbinden möchten. Benutzen Sie dazu einen simplen Texteditor wie z.B. NotePad oder WordPad.

Schritt 2: Fügen Sie den folgenden Code an die Stelle ein, wo Sie den Scroller platzieren möchten:

// 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 Ihre Nachrichten ein.
// Jede Nachricht muss durch Anführungs- und Schlusszeichen eingerahmt werden
// Sie können soviele Nachrichten eingeben, wie Sie wollen
var text=new Array()
text[0]="Sie können dieses Sätzchen noch so lange anstarren."
text[1]="Es hat Ihnen absolut nichts zu sagen."
text[2]="Auch wenn es von einem smarten Texter getextet wurde."

// Jeder Ihrer Nachrichten muss ein Link zugeordnet werden
// Für Nachrichten, die nicht verlinkt werden sollen,  
// tragen Sie ein "#" anstelle eines URLS's ein (siehe Beispiel Mitte)
var textlink=new Array()
textlink[0]="http://www.fabulant.com"
textlink[1]="#"
textlink[2]="http://www.fabulant.com"

// Jedem Ihrer Links muss ein Zielfenster zugeordnet werden
// Mögliche Werte sind "_blank" (öffnet neues Fenster), 
// "_top" oder "_parent" (füllt das ganze Browser-Fenster)
// oder "_self" (lädt die Seite ins gleiche Frame wie der Link)
// Um ein bestimmtes Frame als Zielfenster zu nutzen, tragen Sie einfach den Namen des
// entsprechenden Frames ein (z.B. "main")
var texttarget=new Array()
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_top"

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

// Bestimmen Sie zwei Schriftfarben
var textfontcoloraa="#FFFFFF"
var textfontcolorbb="#FFFF00"

// Bestimmen Sie die Schrift für den Rollover-Effekt
var textfontcolorrollover="#FF0000"

// Bestimmen Sie die Schriftgrösse (CSS-Werte)
var textfontsize=9

// Bestimmen Sie die Hintergrundfarbe
var textbgcolor="#000000"

// Legen Sie fest, ob die Schrift "normal" oder "bold" (fett) sein soll
var textweight="bold"

// Legen Sie fest, ob die Schrift "normal" oder "italic" (kursiv) sein soll
var textitalic="normal"

// Bestimmen Sie Breite und Höhe des Scrollers (Pixels)
var textwidth=300
var textheight=30

// Bestimmen Sie die Farbe des Randes
var textbordercolor="#FDCF15"

// Bestimmen Sie die Dicke des Randes (Pixel)
var textborder=2

// Bestimmen Sie die Breite des stufenlosen Ein- und Ausblendeffekts (Pixel)
var translayerszone=120

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

var textpause=0
var textitalicA=""
var textitalicB=""
var textweightA="<b>"
var textweightB="</b>"
var textdecoration="none"
var textalignonly="center"
var textfontsizeHTML=3
var i_text=0
var textcontent=""
var thisspan=""
var content=""
var contentbg=""
var toggle=1
var timer
var scrollready=true
var tablewidth
var tableheight
var textfontcolortoggle=new Array()
var toggle=1            
var step=2;          
var content
var padding=3
var textcontentheight
var textcontentwidth
var translayerswidth=4
var translayersmax=Math.floor(translayerszone/translayerswidth)
var translayersleftpos=0
var translayersopacity=100
var translayersfactor=100/translayersmax
var translayerswidthall=translayersmax*translayerswidth
var ie=document.all?1:0 
var ns6=document.getElementById&&!document.all?1:0
var ns4=document.layers?1:0
var browserinfos=navigator.userAgent 
var opera=browserinfos.match(/Opera/)

getcontent()
function getcontent() {
	if (ie || ns6) {	
		tablewidth=textwidth-2*textborder
		tableheight=textheight-2*textborder
		content="<table width="+tablewidth+" height="+tableheight+" cellpadding=3 cellspacing=0 border=0><tr valign=middle><td><nobr>"
		for (i=0;i<text.length;i++) {
			if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa}
			else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb}
			toggle*=-1
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolortoggle[i]+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolortoggle[i]+"\'\">"
			content+=text[i]
			content+="</a><font color="+textbgcolor+">----------</font>"

}
		content+="</nobr></td></tr></table>"
	}
	else {	
		tablewidth=textwidth-2*textborder
		tableheight=textheight-2*textborder
		contentbg="<table width="+tablewidth+"  height="+tableheight+"><tr><td><font color="+textbgcolor+">hi</font></td></tr></table>"
		content="<table height="+textheight+" cellpadding=0 cellspacing=0><tr valign=middle><td><nobr>"
		for (i=0;i<text.length;i++) {
			if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa}
			else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb}
			toggle*=-1
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolortoggle[i]+";font-style:"+textitalic+";\" >"
			content+=text[i]
			content+="</a><font color="+textbgcolor+">----------</font>"
		}
		content+="</nobr></td></tr></table>"
	}
}

if (ns4) {
toggle=1
	document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>');
	document.write('<ilayer name="marker" bgcolor="'+textbordercolor+'" width='+textwidth+' height='+textheight+'></ilayer>');
	document.write('</td></tr></table>')
		document.write('<layer name="tickerbg" left='+textborder+' top='+textborder+' width='+(textwidth-4*textborder)+' height='+(textheight-2*textborder)+' bgcolor='+textbgcolor+' visibility=hide>'+contentbg+'</layer>')
		document.write('<layer left=-50000 name="ticker"  onMouseOver="setscrollready(0)" onMouseOut="setscrollready(1)">loading</layer>');

}

if (ie || ns6) {
	document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>');
	document.write('<div id="marker" style="position:relative; width:'+textwidth+'; height:'+textheight+'" ></div>');
	document.write('</td></tr></table>')
	if (ns6) {
		var tablewidth=textwidth-2*textborder
		var tableheight=textheight-2*textborder
	}
	else {
		var tablewidth=textwidth
		var tableheight=textheight
	}
	document.write('<div ID="roof" style="position:absolute;width:'+tablewidth+'px;height:'+tableheight+'px;border-style:solid;border-width:'+textborder+'px;border-color:'+textbordercolor+';background-color:'+textbgcolor+';visibility:hidden;overflow:hidden" onMouseOver="setscrollready(0)" onMouseOut="setscrollready(1)">')
	document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;visibility:hidden">'+content+'</span>')
	
	if (ie && !opera) {
		for (i=0;i<=translayersmax;i++) {
		document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity-=translayersfactor
		}
		translayersleftpos=tablewidth-translayersleftpos
		for (ii=0;ii<=translayersmax;ii++) {
		document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity+=translayersfactor
		}
	}
	
	if (ns6 && !opera) {
		for (i=0;i<=translayersmax-1;i++) {
		document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity-=translayersfactor
		if (translayersopacity<0) {translayersopacity=0.001}
		}
		translayersleftpos=tablewidth-translayersleftpos
		translayersopacity=0.001
		for (i=0;i<=translayersmax-1;i++) {
		document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity+=translayersfactor
		}
	}
	
	
	document.write('</div>')
	if (ns6) {
		document.write('<span ID="tickersize" style="position:absolute;top:0px;left:-5000px;visibility:hidden">'+content+'</span>')
	}
}

function DL_GetElementLeft(eElement) {
    var nLeftPos = eElement.offsetLeft;          
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nLeftPos += eParElement.offsetLeft;      
        eParElement = eParElement.offsetParent;  
    }
    return nLeftPos;                            
}

function DL_GetElementTop(eElement) {
    var nTopPos = eElement.offsetTop;            
    var eParElement = eElement.offsetParent;     
    while (eParElement != null) {                                            
        nTopPos += eParElement.offsetTop;        
        eParElement = eParElement.offsetParent;  
    }
    return nTopPos;                              
}

function setscrollready(whatanswer) {
	if (whatanswer==1) {
		scrollready=true
		checkscroll()
	}
	else {
		scrollready=false
	}
}

function checkscroll() {
	clearTimeout(timer)
	if (scrollready) {
		doscroll()
	}
}
function reopenpage() {
	history.go(0)
}
window.onresize=reopenpage
window.onload=initscroller
</script>

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

Schritt 4: Beten Sie!

back