Gif animado; con velocidad, secuencia y color aleatorios.

furoya · #1 (**permalink**) 07/05/2007, 10:40

Lo del título no es completamente cierto. La imagen sí es un *. gif, pero la animación está hecha con un escript; y es aleatoria para este ejemplo, ya que se pueden manipular todas las variables.

Recordé este viejo efecto cuando propuse en el foro CSS cambiar el color de las imágenes de fondo. En aquel código original, el desafío era alterar el orden de los cuadros; pero fiel a mi costumbre de otras épocas doblé la apuesta y terminé cambiando colores y velocidad. Y según mi costumbre de esta época, no encontré ese código y tuve que hacer todo de nuevo.

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>ANIMACIÓN ALEATORIA.</title>
<script type="text/javascript">

var cuadroC, cuadroX, cuadroY, colorF;
var cuadroI = [1.1, 101.1, 201.1, 1.101, 101.101, 201.101];
var cuadroD = [1.201, 101.201, 201.201, 1.301, 101.301, 201.301];
var cuadroL = cuadroI;

function regresa0(){
cuadroL = (cuadroL == cuadroI)? cuadroD : cuadroI;
cuadroC = cuadroL[Math.floor(Math.random() * (cuadroL.length))];
cuadroC = (cuadroC + "").split(".");
cuadroX = cuadroC[0] *-1;
cuadroY = cuadroC[1] *-1;

colorF = ((Math.floor(Math.random() * 16777216) + 16777216)).toString(16).substring(1);

document.getElementById("cuadros").style.backgroundColor = "#" + colorF;
document.getElementById("cuadros").style.left = cuadroX+ "px";
document.getElementById("cuadros").style.top = cuadroY+ "px";

setTimeout("regresa1()" , 100);
}

function regresa1(){
setTimeout("regresa0()" , Math.floor(Math.random() * 15) * 100)
}
</script>
<style type="text/css">
body{background-color:#000000;color:#ffffff; font-weight:bold; }

#contenedor{position:relative; height:100px; width:100px; overflow:hidden; margin:50px;}

#cuadros{position:absolute; top:-1px; left:-1px; height:401px; width:301px; background-color:#808080; }
.llamada{position:relative; top:-150px; left:170px; font-size:40px}
</style>
</head>
<body>
<h2>Animaci&oacute;n con cuadro, velocidad y colores aleatorios.</h2>

<div id="contenedor"><img src= "http://img90.imageshack.us/img90/9158/estadosalterados2bf4.gif" id="cuadros"></div>

<span class="llamada">*</span>
<input type=button value="REGRESO" onclick="regresa0(); this.disabled='disabled'">
<br>
<p> * Homenaje a <em><u>Altered States</u></em> ( Ken Russell , 1980).</p>

</body>
</html>

Creo recordar que a principios de siglo circulaba por la web un objeto de MS que permitía manejar parámetros de los gif animados, pero nunca lo vi funcionando ni lo pude encontrar después; así que o no funcionaba o lo soñé. Si alguien lo conoce o tiene algún dato lo podría agregar aquí también.

Función "opacity" #21

Función "opacity" #24

Otro carrousel de imágenes manual. ( imagen 3D ) #1 m.i.

cargar una imagen del menu en css #6