[WipeFader]
***







Man kann auch tolle Effekte "nur" mit Java-Script erzeugen. Die Grafikdatei "slidefader.gif" muss sich im selben Verzeichnis wie die HTML-Seite befinden!

[zwischen <HEAD> und </HEAD>]

<STYLE type=text/css>
.redirstyle {COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 150px; POSITION: absolute; TEXT-ALIGN: center; TOP: 220px; WIDTH: 300px
}
A {COLOR: #000000
}
A:hover {COLOR: #ff0000
}
.textstyle {COLOR: #ffffff; FILTER: glow(color=red,strength=2); FONT-FAMILY: Arial; FONT-SIZE: 20pt; FONT-WEIGHT: bold; LEFT: -2000px; POSITION: absolute; TEXT-ALIGN: center; WIDTH: 300px
}
.coverstyle {LEFT: -2000px; POSITION: absolute
}
</STYLE>

<script language=JavaScript>
<!-- Beginning of JavaScript -

// WipeFader-Script, Copyright by Peter Gehrig
// All rights reserved
// 11/23/1999

var message = new Array()
message[0]="Ihre Schlagzeile"
message[1]="Ihre Schlagzeile"
message[2]="Ihre Schlagzeile"
message[3]="Ihre Schlagzeile"
message[4]="Ihre Schlagzeile"
message[5]="Ihre Schlagzeile"
message[6]="Ihre Schlagzeile"

var i_message=0

// The trick of this script is a simple gif-image
// consisting of two colors: black and white dots.
// The black dots are transparent.
// By wipeing this gif-image back and forth over the
// textmessages you get an attractive dissolving effect.
// This image is called slidefader.gif.

// Configure the left and top margin of the text (pixels).
var covertop=80
var coverleft=250

// Configure the size of the wipeing gif-image.
// If you change the size you should create a new image too.
// The coverheight also represents the height of the textzone.
var coverwidth=1200
var coverheight=96

var texttop=covertop
var textleft=coverleft
var textwidth=300
var textheight=coverheight

var cliptop=0
var clipright=textwidth
var clipbottom=coverheight
var clipleft=0

var clippoints

// Configure the speeds of the wipeing effect
var step=40
var pause=50

var timer

function init() {
if (document.all) {
document.all.text.style.posTop=texttop
document.all.text.style.posLeft=textleft
document.all.cover.style.posTop=covertop
document.all.cover.style.posLeft=coverleft
clipleft=0
fadeout()
}
}

function fadeout() {
if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) {
clipleft+=step
clipright=clipleft+textwidth
clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.all.cover.style.clip=clippoints
document.all.cover.style.posLeft-=step
timer= setTimeout("fadeout()",pause)
}
else {
clearTimeout(timer)
i_message++
if (i_message>=message.length) {i_message=0}
text.innerHTML=message[i_message]
fadein()

}
}

function fadein() {
if (document.all.cover.style.posLeft <=coverleft) {
clipleft-=step
clipright=clipleft+textwidth
clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.all.cover.style.clip=clippoints
document.all.cover.style.posLeft+=step
timer= setTimeout("fadein()",pause)
}
else {
clearTimeout(timer)
init()
}
}
// - End of JavaScript - -->
</SCRIPT>

[in den <BODY>-Tag]

onload=init() style="OVERFLOW-X:hidden; OVERFLOW-Y: scroll; WIDTH: 100%"

[zwischen <BODY> und </BODY>]

<div class=textstyle id=text>***</div>
<div class=coverstyle id=cover>
<IMG src="slidefader.gif"></div>

[Autor]

Peter Gehrig

[Download]

Kopieren sie bitte den Quelltext und untenstehende Grafik

Copyright © 1998- Nightfire Webworker Archiv Script No: 0345