Schnee Ticker: Kostenlose DHTML und JavaScript Text Animationen

Schneemelder

Wetten, dass diese coole Text-Animation im Hochsommer Furore macht?
Funktioniert mit IE 5x/6x, NS 6x/7x. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

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

Schritt 2: Fügen Sie den folgenden Code dort ein, wo Sie den Schneemelder 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

var text=new Array()
var textlink=new Array()
var texttarget=new Array()
/////////////////////////////////////////////////////////////////////
// Unterhalb dieser zwei Linien beginnt die Editierzone
// Bestimmen Sie die Eigenschaften der Text-Animation 
/////////////////////////////////////////////////////////////////////

// Tragen Sie Ihre Nachrichten ein. Aber immer schön kurz bleiben!
// Jede Nachricht muss durch Anführungs- und Schlusszeichen eingerahmt werden
// Sie können soviele Nachrichten eingeben, wie Sie wollen
text[0]="Es schneyelet, es beyelet."
text[1]="Es ghot e chüele Wind."
text[2]="Und d'Meytschi legget d'Händsche a."
text[3]="Und d'Buebe loufet gschwind."

// 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 zweites Link-Beispiel)
textlink[0]="http://www.fabulant.com"
textlink[1]="#"
textlink[2]="http://www.fabulant.com"
textlink[3]="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")
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_self"
texttarget[3]="_top"

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

// Legen Sie die Schriftfarbe fest
var textfontcolor="#AAAAFF"

// Legen Sie die Schriftfarbe für den Rollovereffekt fest
var textfontcolorrollover="#ffff00"

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

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

// Bestimmen Sie die Breite der Textbox (Pixels)
var textwidth=150

// Bestimmen Sie die Höhe der Textbox (Pixels)
var textheight=90

// Bestimmen Sie die Pause der Textbox (Sekunden)
var textpause=2

// Bestimmen Sie die Dicke des Randes (Pixels)
var textborder=3

// Bestimmen Sie die Randfarbe
var textbordercolor="#AAAAFF"

// Bestimmen Sie die horizontale Textposition. 
// Mögliche Werte sind: "center", "left" oder "right"
var textalign="center"

// Bestimmen Sie die vertikale Textposition. 
// Mögliche Werte sind: "middle", "top" oder "bottom"
var textvalign="middle"

// Bestimmen Sie die Anzahl der Schneeflocken (mehr als 20 - 30 nicht empfohlen)
var snowmax=20

// Bestimmen Sie die Schneefarben (Anzahl beliebig)
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Bestimmen Sie die Schriften, mit denen die Schneeflocken "geschrieben" werden
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Bestimmen Sie das Schriftzeichen, das Schneeflocken bildet
var snowletter="*"

// Legen Sie die Sinkgeschwindigkeit fest (empfohlen sind Werte zwischen 0.3 to 2)
var sinkspeed=0.6

// Bestimmen Sie die maximale Grösse der Schneeflocken (Pixels)
var snowmaxsize=12

// Bestimmen Sie die minimale Grösse der Schneeflocken (Pixels)
var snowminsize=5

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

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

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

if (textfontsizeHTML<1) {textfontsizeHTML=1}
if (textfontsizeHTML>=7) {textfontsizeHTML=7}

var browserinfos=navigator.userAgent 
var ns4=document.layers
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var ie=document.all&&!browserinfos.match(/Opera/)
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function changecontent() {
	getcontent()
	i_text++
	if (i_text>=text.length) {i_text=0}	
	if (ie) {
		ticker.innerHTML=content
		fadein()
	}
	if (ns6) {
		document.getElementById('ticker').innerHTML=content
		fadein()
	}
	if (opera) {
		document.getElementById('ticker').innerHTML=content
		var texttimer=setTimeout("changecontent()",textpause*1.5)
	}
	if (ns4) {
		document.roof.document.ticker.document.write(content)
		document.roof.document.ticker.document.close()
		var texttimer=setTimeout("changecontent()",textpause)
	}	
}

function fadein() {
	if (transparency<100){
		transparency+=transparencystep
		if (ie) {
			document.all.ticker.filters.alpha.opacity=transparency
		}
		if (ns6) {
			document.getElementById('ticker').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("fadein()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("fadeout()",textpause)
	}
}

function fadeout() {
	if (transparency>0){
		transparency-=transparencystep
		if (ie) {
			document.all.ticker.filters.alpha.opacity=transparency
		}
		if (ns6) {
			document.getElementById('ticker').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("fadeout()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("changecontent()",1000)
	}
}

getcontent()
function getcontent() {
	if (ie) {
		var tablewidth=textwidth-2*textborder
		var tableheight=textheight-2*textborder
	}
	else {
		var tablewidth=textwidth
		var tableheight=textheight
	}
	if (ie || ns6 || opera) {	
		var padding=parseInt(textborder)+3
		content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+padding+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
		content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
		content+=text[i_text]
		content+="</a></td></tr></table>"
	}
	else {	
		content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+textborder+" cellspacing=0><tr valign="+textvalign+"><td align="+textalign+">"
		content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\">"
		content+=text[i_text]
		content+="</a></td></tr></table>"

framecontent="<table width="+tablewidth+" height="+tableheight+" cellpadding=0 cellspacing=0 border="+textborder+"><tr><td>"
		framecontent+="<font color=\""+textbgcolor+"\">"
		framecontent+="."
		framecontent+="</font>"
		framecontent+="</td></tr></table>"
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
	marginbottom = textheight
	marginright = textwidth
	var snowsizerange=snowmaxsize-snowminsize
	for (i=0;i<=snowmax;i++) {
		crds[i] = 0;                      
    	lftrght[i] = Math.random()*15;         
    	x_mv[i] = 0.03 + Math.random()/10;
		snow[i]=document.getElementById("s"+i)
		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
		snow[i].size=randommaker(snowsizerange)+snowminsize
		snow[i].style.fontSize=snow[i].size
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
		snow[i].sink=sinkspeed*snow[i].size/5
		snow[i].posx=randommaker(marginright-snow[i].size)
		snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
		snow[i].style.left=snow[i].posx
		snow[i].style.top=snow[i].posy
	}
	movesnow();changecontent()
}

if (ie || ns6 || opera) {
	if (ns6) {
		textwidth-=2*textborder
		textheight-=2*textborder
	}
	document.write("<table border=0 cellpadding=0 cellspacing=0><tr><td width="+textwidth+" height="+textheight+" valign=top>")
	document.write("<div id=\"roof\" style=\"position:relative;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";overflow:hidden\">")
	
	document.write("<div id=\"ticker\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";overflow:hidden\;filter:alpha(opacity=100)\">")
	document.write("</div>")
	for (i=0;i<=snowmax;i++) {
	document.write("<div id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</div>")
	}
	document.write("</div>")
	document.write("</td></tr></table>")
	window.onload=initsnow
}

else if (ns4) {
		document.write("<table border=0 cellpadding=0 cellspacing=0><tr><td width="+textwidth+" height="+textheight+" valign=top>")
	document.write("<ilayer name=\"roof\" width="+textwidth+" height="+textheight+">")
		document.write("<layer name=\"tickerframe\" width="+textwidth+" height="+textheight+" top=0 left=0 bgcolor="+textbgcolor+">")
		document.write(framecontent)
		document.write("</layer>")
		document.write("<layer name=\"ticker\" width="+textwidth+" height="+textheight+" top=0 left=0>")
		document.write()
		document.write("</layer>")
		document.write("</ilayer>")
		document.write("</td></tr></table>")
	window.onload=changecontent
}
</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