Gracias
Shiryu_Libra. No sé si es una competencia, más bien sería como tirar ideas para que los que recién empiezan con JS las desarmen y así aprendan un poco más.
Dime,
derkenuke, ¿no conviene más usar las etiquetas
CODE del foro en vez de
PHP? Así no te cambiarían el "%" por el "%".
Tu ejemplo es brillante, ya tenemos un "filtro
wave". Lo que me recordó que en las FAQs hay un lindo efecto que hasta ahora se podía sólo en
IExplorer 52. Un efecto chachi para texto y no muy complicado
y entonces le di otra vuelta más a tu código.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">
function color(n) {
return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
}
var contRefl = "";
var objOrig , alto , contOrig , capas;
function voltear0(){
objOrig = document.getElementById( "letras" );
alto = parseInt(objOrig.offsetHeight);
contOrig = objOrig.innerHTML;
capas = alto;
}
function voltear1(){
contRefl = "";
var onda = Math.floor(Math.random()*8) + 2;
for(c=0, col=0, r=2.5; c<capas; c++, col += 255/(capas) ){
var ang = c* onda* Math.PI/ (capas/2);
var elCos = Math.sin(ang)* r;
var colHex = "#"+ color(col)+ color(col)+ "ff";
contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c+1-alto)+"px; color: "+colHex+"; margin-left:"+(elCos)+"px;'>"+ contOrig +"</div></div>";
}
document.getElementById("charco").style.height = alto +"px";
document.getElementById("charco").innerHTML = contRefl;
voltear2();
}
function voltear2(){
setTimeout("voltear1()" , 100)
}
onload = voltear0;
onresize = voltear0;
</script>
<style type="text/css">
body {
background-color:#ccccff;
}
#letras , #charco {
position:relative;
font-weight:900;
font-size:70px;
font-family:"arial black";
color:#000000;
margin-bottom:-44px;
cursor:pointer;
cursor:hand;
}
#charco div {
overflow:hidden;
}
</style>
</head>
<body>
<h2>Reflejo de texto animado "en agua". (IE, FF)</h2>
<p>Click para ver el efecto.</p>
<div id="letras" onclick= "voltear1()"> TEXTO EN AGUA </div>
<div id="charco"></div>
</body>
</html>
Es muy experimental, y muuuy lento en algunas máquinas. En vez de reescribir el contenido de
charco habría que usar nodos, recorriéndolos uno por uno. A ver si de esa forma anda mejor. Pero yo no lo voy a hacer porque con los nodos todavía nos tratamos de 'usted'.
Tu último ejemplo también tiene algún problema ( me
cache!, y yo que creí que era desprolijo! ). Voy a ver si hago una versión horizontal y la posteo.