Tema: Desvanecer colores
Ver Mensaje Individual
  #13 (permalink)  
Antiguo 31/10/2005, 11:16
furoya
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 6 meses
Puntos: 317
Hola de nuevo :

Estuve haciendo algunas pruebas y tengo un borrador que muestra un "color ↔ B&N" para Firefox, pero paso a paso. Supongo que IExplorer también lo podrá hacer, pero yo nunca lo vi.

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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CAMBIA GRISES.</title>
<script type="text/javascript">

var grado = 100;
var hL0 = "";
var lL0 = "";
var hL1 = "";
var lL1 = "";
var hL2 = "";
var lL2 = "";
var hL3 = "";
var lL3 = "";
var hL4 = "";
var lL4 = "";
var brillo = 100;

function azar(){
hL0 = Math.ceil(Math.random()*100);
lL0 = Math.ceil(Math.random()*100);
hL1 = Math.ceil(Math.random()*100);
lL1 = Math.ceil(Math.random()*100);
hL2 = Math.ceil(Math.random()*100);
lL2 = Math.ceil(Math.random()*100);
hL3 = Math.ceil(Math.random()*100);
lL3 = Math.ceil(Math.random()*100);
hL4 = Math.ceil(Math.random()*100);
lL4 = Math.ceil(Math.random()*100);

for (i=0 ; i<5 ; i++){
document.getElementById("L"+i).style.color = "hsl("+eval('hL'+i)+","+grado+"%,"+eval('lL'+i)+"%)";
}
}

function gira(){
var rdns=(2*3.141592/360)

for(f=0;f<=359;f+=36){
var x = Math.floor(90 * Math.cos(rdns*f));
var y = Math.floor(90 * Math.sin(rdns*f));
document.getElementById("P"+f).style.left = 90 +x+ "px";
document.getElementById("P"+f).style.top = 90 +y+ "px";
}

}

function IGrises(){
for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, 100%, "+brillo+"%)";
brillo -= 10;
}
brillo = 100;

}


function grises(){
if (grado <= 101 && grado > -1){
grado -= 1;

for (i=0 ; i<5 ; i++){
document.getElementById("L"+i).style.color = "hsl("+eval('hL'+i)+","+grado+"%,"+eval('lL'+i)+"%)";
}

document.body.style.backgroundColor = "hsl(120, "+grado+"%, 50%)";
document.getElementById("bravo").style.backgroundColor = "hsl(300, "+grado+"%, 50%)";
document.getElementById("charly").style.backgroundColor = "hsl(30, "+grado+"%, 50%)";
document.getElementById("delta").style.backgroundColor = "hsl(50, "+grado+"%, 50%)";

document.getElementById("alfa").style.color = "hsl(0, "+grado+"%, 30%)";
document.getElementById("bravo").style.color = "hsl(60, "+grado+"%, 30%)";
document.getElementById("charly").style.color = "hsl(240, "+grado+"%, 30%)";

document.getElementById("bravo").style.borderColor = "hsl(400, "+grado+"%, 50%)";
document.getElementById("charly").style.borderColor = "hsl(800, "+grado+"%, 50%)";


for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, "+grado+"%, "+brillo+"%)";

if(brillo == 0)brillo = 100;
else {brillo -= 10;}
}
setTimeout("grises()" , 50);
}

else {
grado = 0;
brillo = 10;
}
document.title = grado+" "+brillo;
}



function IColor(){
for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, 0%, "+brillo+"%)";
brillo += 10;
}
brillo = 10;

}


function color(){

if (grado >= 0 && grado < 101){
grado += 1;

for (i=0 ; i<5 ; i++){
document.getElementById("L"+i).style.color = "hsl("+eval('hL'+i)+","+grado+"%,"+eval('lL'+i)+"%)";
}

document.body.style.backgroundColor = "hsl(120, "+grado+"%, 50%)";
document.getElementById("bravo").style.backgroundColor = "hsl(300, "+grado+"%, 50%)";
document.getElementById("charly").style.backgroundColor = "hsl(30, "+grado+"%, 50%)";
document.getElementById("delta").style.backgroundColor = "hsl(50, "+grado+"%, 50%)";

document.getElementById("alfa").style.color = "hsl(0, "+grado+"%, 30%)";
document.getElementById("bravo").style.color = "hsl(60, "+grado+"%, 30%)";
document.getElementById("charly").style.color = "hsl(240, "+grado+"%, 30%)";

document.getElementById("bravo").style.borderColor = "hsl(400, "+grado+"%, 50%)";
document.getElementById("charly").style.borderColor = "hsl(800, "+grado+"%, 50%)";


for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, "+grado+"%, "+brillo+"%)";

if(brillo == 100)brillo = 0;
else {brillo += 10;}
}
setTimeout("color()" , 50);
}

else {
grado = 100;
brillo = 100;
}
document.title = grado+" "+brillo;
}

</script>

<style type="text/css">
body { background-color: hsl(120, 100%, 50%); width: 100%; margin: 0; }

#alfa { color: hsl(0, 100%, 30%); font-size: 200%; margin: 15px 10px; }

#bravo {  background-color: hsl(300, 100%, 50%); color: hsl(60, 100%, 30%); font-size: 200%;  border-color: hsl(400, 100%, 50%); border-width: 10px; margin-left: 15%; }

#charly { background-color: hsl(30, 100%, 50%); color: hsl(240, 100%, 30%); font-size: 200%;  border-color: hsl(800, 100%, 50%); border-width: 10px; margin-left: 15%; }

#delta { background-color: hsl(50, 100%, 50%); color: hsl(240, 100%, 50%); font-size: 200%; width: 50%; height: 250px; }

#eco {  position: relative; float: left; margin: auto; }

#foxtrot {  position: relative; float: right; }

#P0{color: hsl(0, 100%, 100%);}
#P36{color: hsl(0, 100%, 90%);}
#P72{color: hsl(0, 100%, 80%);}
#P108{color: hsl(0, 100%, 70%);}
#P144{color: hsl(0, 100%, 60%);}
#P180{color: hsl(0, 100%, 50%);}
#P216{color: hsl(0, 100%, 40%);}
#P252{color: hsl(0, 100%, 30%);}
#P288{color: hsl(0, 100%, 20%);}
#P324{color: hsl(0, 100%, 10%);}

.punto {position: absolute; font-size: 300%; }

.contAzar {position: relative; float: right; margin-top: 25%; }

.azar {font-size: 160%; font-weight: 900; font-family: cursive; }

.imag {height: 100%; width: 0; vertical-align: middle; }

</style>
</head><body onload="azar(); gira()">


<h1 id="alfa">Cambia gradualmente a escala de grises o color. (FF3.0, Op9.6, Chr2.0)</h1>

<div id="delta">

<div id="eco">

<div class="contAzar">
<span class="azar" id="L0">A</span> <span class="azar" id="L1">Z</span> <span class="azar" id="L2">A</span> <span class="azar" id="L3">R</span> <span class="azar" id="L4">.</span> 
</div>

</div>

<div id="foxtrot">

<span id="P0" class="punto">·</span> <span id="P36" class="punto">·</span> <span id="P72" class="punto">·</span> <span id="P108" class="punto">·</span> <span id="P144" class="punto">·</span> <span id="P180" class="punto">·</span> <span id="P216" class="punto">·</span> <span id="P252" class="punto">·</span> <span id="P288" class="punto">·</span> <span id="P324" class="punto">·</span> 

</div>

</div>
<br /><br />
<input type="button" value="COLOR" id="bravo" onclick="IColor(); color()" />
<input type="button" value="GRISES" id="charly" onclick="IGrises(); grises()" />

</body></html>
Hay varios efectos más, lo que puede confundir a la hora de desarmarlo. Dejo otra versión más despojada que además contiene el efecto para simular grisado de imágenes.

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>Pasos </title>
<script type="text/javascript">

var grado = 100;

function grises(){
if (grado <= 100 && grado > -1){
grado -= 1;

document.body.style.backgroundColor = "hsl(60, "+grado+"%, 50%)";
document.getElementById("bravo").style.backgroundColor = "hsl(300, "+grado+"%, 80%)";
document.getElementById("charly").style.backgroundColor = "hsl(30, "+grado+"%, 50%)";

document.getElementById("alfa").style.color = "hsl(0, "+grado+"%, 70%)";
document.getElementById("bravo").style.color = "hsl(60, "+grado+"%, 30%)";
document.getElementById("charly").style.color = "hsl(240, "+grado+"%, 35%)";

document.getElementById("bravo").style.borderColor = "hsl(400, "+grado+"%, 50%)";
document.getElementById("charly").style.borderColor = "hsl(800, "+grado+"%, 50%)";

for(i=0; i<2; i++){
document.getElementById("bola" + i).style.opacity = grado/100;
}

setTimeout("grises()" , 10);
}

document.title = grado;
}


</script>

<style type="text/css">
html { width: 100%; margin: 0; }

body { background-color: hsl(60, 100%, 50%); width: 100%; margin: 0; font-size: 100%; }

#alfa { color: hsl(0, 100%, 70%); font-size: 200%; margin: 15px 10px; text-align: center; font-weight: 900; }

#bravo { background-color: hsl(300, 100%, 80%); color: hsl(60, 100%, 30%); font-size: 200%;  border-color: hsl(400, 100%, 50%); border-width: 10px; margin: 15px 10px; text-align: center; }

#charly { background-color: hsl(30, 100%, 50%); color: hsl(240, 100%, 35%); font-size: 200%;  border-color: hsl(800, 100%, 50%); border-width: 10px; margin: 15px 10px; }

#delta {text-align: center; }

#bola0, #bola1{width: 1em; -moz-opacity: 1; position: absolute; top: 0; left: 0; margin: 0; padding: 0; border-collapse: collapse; }

#bola2, #bola3 {width: 1em; position: relative; top: 0; left: 0; margin: 0; padding: 0; border-collapse: collapse; }

.contBola {position: relative; }

</style>
</head>
<body>

<p id="alfa">
<span class="contBola">
<img src="http://www.forosdelweb.com/images/statusicon/user_offline.gif" id="bola2">
<img src="http://www.forosdelweb.com/images/statusicon/user_online.gif" id="bola0">
</span>

 Documento que cambia a Blanco & Negro.
<span class="contBola">
<img src="http://www.forosdelweb.com/images/statusicon/user_offline.gif" id="bola3" />
<img src="http://www.forosdelweb.com/images/statusicon/user_online.gif" id="bola1" />
</span><br>
(FF3.0, Op9.6, Chr2.0)</p>

<br><br>

<h1 id="bravo">Texto Texto Texto Texto Texto Texto Texto </h1>
<br><br>
<p id="delta"><input type="button" value="CAMBIAR" id="charly" onclick="grises()" /></p>

</body></html>
[Actualización : los ejemplos funcionan en Mozilla / Firefox, Opera, Chrome.]

Continúa en el mensaje siguiente
Última edición por furoya; 28/06/2009 a las 12:59 Razón: actualizar código.