Das folgende “Fader” Skript blendet ein <DIV> Element einer Seite langsam aus: In unserem Beispiel den Hintergrund, während ein Logo im Vordergrund weiterhin zu sehen bleibt. Das Skript kommt ohne JQuery und andere zusätzliche Bibliotheken aus und kann direkt eingebunden werden – das einzige, was man noch anpassen muss, sind die Position der Elemente und die Bilder für Hintergrund und Vordergrund!
<html>
<head>
<style type="text/css">
body { background-color:#000;color:#FFF; }
#hgr { width:800;height:480;position:absolute;top:0;left:0;background-image:url("hintergrund.jpg"); }
#logo { width:688;height:226;position:absolute;top:146px;left:56px;background-image:url("logo.jpg"); }
</style>
</head>
<body>
<div id="hgr"></div>
<div id="logo"></div>
<script type="text/javascript">
function fader(wert) {
var i = wert;
if(i > 1) {
var h = document.getElementById("hgr");
h.style.opacity = "0."+i;
i = i - 1;
setTimeout("fader("+i+")",100);
}
}
window.onload = fader(99)
</script>
</body>
</html>