De nada
Rebel001. Hace un tiempo volví para actualizar el código que puse arriba; tenía un bug en
Opera que no corregí (todavía está), pero lo parché con un
position:fixed y ahora no se nota.
Otra cosa que tendría que corregir son los saltos del cuadro blanco. Se puede hacer una animación de desplazamiento suave, quizá con "amortiguación"; ya hubo temas donde se mencionó el asunto. Si nadie lo hace antes, quizá junte ganas y se lo agregue. Les dejo algunos enlaces.
Smooth scroll Mover un DIV con efecto Easing backgound image resizable? Velocidad Opacity en imagen
Mirando otra vez la idea original, se me ocurrió otro efecto. Y me puse a trabajar porque iba a ser muy fácil. Había que superponer parcialmente las letras de un texto, donde se cruzaran los colores se debían mezclar formando —claro— otro color que sería la suma de ambos. Pero la transparencia era sólo entre letras, no contra el fondo del párrafo o del documento.
A estas alturas, ya se imaginarán que el efecto se hace con dos capas de texto superpuestas, la de adelante con la transparencia. Jugando con
letter-spacing, y el
z-index con el orden invertido, tendríamos todo resuelto.
Lo más difícil es hacer que no se repitan los colores aleatorios en dos letras seguidas (que lo resolví más o menos).
Pues no. No fue nada fácil. Fue una tragedia. Los
span me ignoraban el
z-index, si le ponía el
layout para el filtro perdía el espaciado entre caracteres, si le daba
position:relative en
IE aparecía un "
background-color" para cada letra.
Un ejemplo sencillo y didáctico que debió salir 'de taquito' me demandó casi 3 horas. y terminó siendo un engendro espantoso, que lo posteo solamente para ver si alguien tiene una idea mejor. A mí se me terminaron.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>MEZCLA COLORES.</title>
<script type="text/javascript">
function colores(){
var misLetras1 = "";
var misLetras2 = "";
var misColores = ["c0c0c0","808080","000000","800000","ff0000","800080","ff00ff","008000","00ff00","808000","ffff00","000080","0000ff","008080","00ffff","ffffff"];
var miColor = Math.floor(Math.random()*15);
var miParrafo1 = document.getElementById("texto1");
var miParrafo2 = document.getElementById("texto2");
var miTexto = (miParrafo1.innerText)? miParrafo1.innerText : miParrafo1.textContent;
miTexto = miTexto.replace(/ /g, "_");
var textoCortado1 = miTexto.split("");
var largoTexto = textoCortado1.length;
var letrasX = [];
document.getElementById("contenedor").style.height = miParrafo1.offsetHeight +"px";
miParrafo1.innerHTML = "";
for(c=0; c<largoTexto; c++){
var colorLetra = Math.floor(Math.random()*15);
colorLetra = (colorLetra == miColor)? colorLetra+1 : colorLetra;
miColor = colorLetra;
textoCortado1[c] = "<span style='color:#"+ misColores[colorLetra] +";'>"+ textoCortado1[c] +"</span>";
miParrafo1.innerHTML += textoCortado1[c];
letrasX[c] = miParrafo1.getElementsByTagName("span")[c].offsetLeft;
}
var textoCortado2 = textoCortado1;
textoCortado2.reverse();
letrasX.reverse();
miParrafo2.innerHTML = "";
for(c=0; c<largoTexto; c++){
miParrafo2.innerHTML += textoCortado2[c];
miParrafo2.getElementsByTagName("span")[c].style.position = "absolute";
miParrafo2.getElementsByTagName("span")[c].style.left = letrasX[c] +"px";
}
}
onload = colores;
</script>
<style type="text/css">
body {font-size:100%; background-image: url(http://www.forosdelweb.com/images/statusicon/forum_old_lock.gif); }
h2 , p {color:#000000; background-color:#ffffff; }
#contenedor {position:relative; }
#texto1 , #texto2 {color:#ffffff; font-family:arial, verdana, sans-serif; font-size:8em; font-weight:bold; white-space:nowrap; position:absolute; top:0; left:0; }
#texto1 {letter-spacing:-0.3em; filter:alpha(opacity="40"); -khtml-opacity:.4; -moz-opacity:.4; opacity:.4; }
</style>
</head>
<body>
<h2>El texto encimado mezcla sus colores entre caracteres pero no contra el fondo. (IE7, FF3, Op9.6, Chr0.2)</h2>
<div id=contenedor>
<div id=texto2></div>
<div id=texto1>FOROS DEL WEB.</div>
</div>
<p><strong>Los espacios se reemplazan por 'guiones bajos'.</strong></p>
</body>
</html> Sí, sí, ya sé. Pero al menos es compatible.
Digo, porque la otra forma que se me ocurrió después no lo es.
En mi primer mensaje dije que el efecto debía estar hecho con
flash. Porque me olvidé del
IE5.5 y sus DX
DXImageTransform.Microsoft.Compositor()
Este filtro permite modificar 2 capas superpuestas sumando o restando sus colores, "recortando" el contorno de un elemento (como un texto) del otro, y algunos efectos más que no recuerdo.
Pero es muy díficil de usar. Aunque es CSS, un muchos casos hay que "guardar" una capa, "ubicar" la otra y después "aplicar" el filtro ... y todo esto se hace con JS!
Los demás navegadores tienen su propia versión, para
canvas globalCompositeOperation
pero también usa JS y el texto sería sólo para la familia
Mozilla. Así que seguimos con las incompatibilidades.
Igual les dejo un par de ejemplos
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CRUCE DE COLORES. (DX)</title>
<style type="text/css">
body{color:#ffffff; background-color:#000000; font-size:100%; }
#contenedor0{position:relative; height:3em; color:#ffff00;
background-color:#333333; font-size:4em; }
#contenedor1 {position:relative; height:3em; color:#ffffff; background-color:transparent; font-size:1em; filter:progid:DXImageTransform.Microsoft.Compositor(); }
#cuadroFondo, #cuadrofrente {position:absolute; height:1em; width:2.6em; top:0; left:0; background-color:transparent; color:#ff0000; font:bold 2em arial, verdana, sans-serif;
white-space:nowrap; }
#cuadrofrente {color:#ffffff; }
#fDw {font:bold 1em arial, verdana, sans-serif; top:0.75em;
left:1em; position:absolute; white-space:nowrap; }
</style>
</head>
<body>
<h2>La superposición de dos textos
se destaca con otro color. (IE5.5+)</h2>
<div id=contenedor0>
<div id=cuadroFondo><(o)></div>
<div id=contenedor1>
<div id=fDw>FOROS DEL WEB.</div>
</div>
</div>
<script type=text/javascript>
var ancho;
var origen = 0;
var dirForos = 2;
function mueve(){
dirForos = (origen < 0)? 2 : (origen > ancho)? -2 : dirForos;
origen = origen + dirForos;
document.getElementById("cuadroFondo").style.left = origen + "px";
document.getElementById("cuadroFrente").style.left = origen + "px";
setTimeout("mueve()", 100);
}
function cambia0(){ alert('cambia0');
document.getElementById("contenedor1").filters.item(0).Apply();
document.getElementById("contenedor1").innerHTML =
"<div id=cuadroFrente>" + document.getElementById("cuadroFondo").innerHTML + "</div>";
document.getElementById("contenedor1").filters.item(0).Play();
setTimeout("cambia1()" , 1000);
}
function cambia1(){ alert("cambia1");
document.getElementById("contenedor1").filters.item("DXImageTransform.Microsoft.Compositor").Function = 10;
ancho = document.getElementById("contenedor1").offsetWidth - document.getElementById("cuadroFondo").offsetWidth;
mueve();
}
onload = cambia0;
</script>
<p>Ambos textos de color blanco cambian a rojo en las zonas de cruce.</p>
</body>
</html> _____________________ Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
<title>CRUCE DE COLORES. (CANVAS)</title>
<script type="text/javascript">
var dm = 40;
var dir = 1;
function contraste(){
document.getElementById("contenedor").innerHTML = "var dm = "+dm+"<canvas id='circArroba' width='200' height='200'>";
var elCanvas = document.getElementById('circArroba').getContext('2d');
elCanvas.translate(20, 115);
elCanvas.mozTextStyle = 'bold 100px arial, verdana, sans-serif';
elCanvas.mozPathText('@');
elCanvas.fillStyle = "#ff0000";
elCanvas.fill();
elCanvas.globalCompositeOperation = "xor";
dir = (dm < 30)? 1 : (dm > 80)? -1 : dir;
dm = dm + dir;
elCanvas.fillStyle = "#ff0000";
elCanvas.beginPath();
elCanvas.arc(90,0,dm,0,Math.PI*2,true);
elCanvas.fill();
}
function inicio(){
setInterval(contraste,60);
}
onload = inicio;
</script>
<style type="text/css">
body {background-color: #000000; color: #ffffff; }
#contenedor {background-color: #ffffff; color: #000000; width: 200px; }
</style>
</head>
<body>
<h2>Capas de <code>canvas</code> se transparentan con <code>"xor"</code>. (Moz)</h2>
<div id=contenedor><canvas id=circArroba width="200" height="200"></canvas></div>
<p>Ambas capas de color rojo cambian al blanco de fondo en las zonas
de cruce.
</p>
</body>
</html>
Los primeros ejemplos que pusimos
kemie y yo —insisto— al menos funcionan en ... ¿todos?
.