Hola todos :
Qué idea interesante.
Estoy casi seguro de que lo que viste estaba hecho con flash,
Rebel001. Pero estuve probando con javascript y algo se puede hacer.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>CONTRASTE.</title>
<style type="text/css">
html {overflow:hidden; margin:0; height:100%; }
body {background-color:#990000; color:white; overflow:hidden; margin:0; height:100%; }
#contenedor {position:relative; top:0; left:0; overflow:auto; height:100%; width:100%; position:fixed; }
#alfa , #bravo {position:absolute; top:0; left:0; font-size:30px;
font-weight:bold; color:#cccccc; background-color:#990000; padding-top:350px; }
#bravo {color:#990000; background-color:#ffffff; clip:rect(50px,600px,200px,100px);
width:100%; overflow:hidden; }
.charly {padding:15px;}
.delta {background-image:url("http://www.forosdelweb.com/images/statusicon/user_offline.gif");
height:30px; background-repeat:repeat-x; width:90%; }
#bravo .delta {background-image:url("http://www.forosdelweb.com/images/statusicon/user_invisible.gif");
}
</style>
<script type="text/javascript">
var dist = 0;
var arrI = 50;
var abaI = 200;
function inicio(){
var contenido = document.getElementById("alfa").innerHTML;
document.getElementById("contenedor").scrollTop = "0";
document.getElementById("bravo").innerHTML = contenido;
document.getElementById("bravo").style.clip = "rect(50px,600px,200px,100px)"
}
function mueve(){
dist = document.getElementById("contenedor").scrollTop;
document.title = dist;
status = dist;
arrF = arrI + dist;
abaF = abaI + dist;
document.getElementById("bravo").style.clip = "rect("+arrF+"px, 600px, "+abaF+"px, 100px)";
}
</script>
</head >
<body onload="inicio()" onscroll=none>
<div id="contenedor" onscroll="mueve()" >
<div id="alfa">
<div class="charly">
<h1>Al desplazarse el texto sobre el <em>banner</em> blanco cambia su color. (IE7, FF3, Op9.6, Chr)</h1>
<div class="delta"></div>
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP
QWERTYUIOP QWERTYUIOP QWERTYUIOP QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP
<br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP
<br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP <br />QWERTYUIOP
</div>
</div>
<div id="bravo">
</div>
</div>
</body>
</html>
En el
IExplorer6 (y seguramente en los otros) el rectángulo salta un poco; pero en
Firefox no se nota tanto. Aunque también depende de los recursos del SO.
Texto transparente en Firefox (como filter chroma)