Fondo mosaico de animación aleatoria.

furoya · #1 (**permalink**) 20/09/2011, 07:03

Hace unos días publiqué un efecto (algo exagerado) para hacer un "borde con brillos"

Resplandor #10

En el momento no lo noté, pero mirándolo más tarde me empezó a parecer conocido. Resulta que lo había hecho antes, y no lo recordaba.
Les cuento la historia, porque coincide con el comienzo de este tema.

A principios de siglo había navegadores que tenían un "problema" ; no mostraban *.gif animados como background-image. Era una cuestión de seguridad; como sabemos, ese tipo de imagen no es una imagen sino varias imágenes con unas líneas de programa que le dicen en qué orden mostrarlas y durante cuánto tiempo. Si alguien las cambiaba por un código malicioso se convertía en una vulnerabilidad más para arreglar.

Entonces apareció el planteo sobre cómo hacer una animación de fondo en *.gif que fuese menos riesgosa, o que el navegador no la vetara.

Y lo que se me ocurrió fue usar tecnología de punta, de última generación, como sprite y javascript.

El JS demostró con el tiempo que podía ser bastante más peligroso que la imagen, pero en ese momento todos los navegadores promovían su uso y no le ponían demasiadas barreras. El sprite —que no tenía ese nombre aún— era un invento para mejorar la velocidad de bajada en conexiones dial-up que hoy ya no tiene sentido, pero entonces era una buena opción, además de tener algunas ventajas colaterales como la de mejorar la velocidad de los rollover y permitir animaciones aún más complejas que las del *.gif (para eso todavía sirve).

El proyecto fue hacer una capa con fondo mosaico y que cada "imagen" se viera con su animación, y no detenida en el primer cuadro como ocurría normalmente.
De entrada propuse usar una sola imagen, y que la animación fuese distinta para cada mosaico; algo no imposible, pero sí muy difícil para la tecnología del animated Graphic Internet File . A cambio, esa animación sería de nada más que 2 cuadros, como para no complicar tanto el ejemplo

.

El resultado fue un fondo con ojos parpadeando en orden aleatorio, que por supuesto hoy no pude encontrar por ningún lado, y tuve que hacerlo de nuevo para mostrárselos.

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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<title>FONDO SIMULADO CON ANIMACI&Oacute;N ALEATORIA.</title>

<script type="text/javascript">
var capaFondo = "ojos1";
var alto, ancho, cantidadX, cantidadY;

function inicio(){
alto = document.getElementById("fin").offsetTop;
ancho = document.body.offsetWidth;

cantidadY = (Math.ceil(alto / 400)) * 2;
cantidadX = (Math.ceil(ancho / 400)) * 2;

document.getElementById("marco").style.height = alto + "px";
document.getElementById("ojos0").style.height = 
document.getElementById("ojos1").style.height = alto * 3 + "px";

document.getElementById("ojos0").style.width = 
document.getElementById("ojos1").style.width = ancho * 3 + "px";

setTimeout(guina , 500);
}

function guina(){
capaFondo = (capaFondo == "ojos0") ? "ojos1" : "ojos0";

document.getElementById(capaFondo).style.left = parpadea(cantidadX) + "px";
document.getElementById(capaFondo).style.top = parpadea(cantidadY) + "px";

setTimeout(guina , 500);
}

function parpadea(D){
return(Math.floor(Math.random()*D) * -200);
}

onload = inicio;
</script>


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

body {background-color:white; height:100%;}

input {height: 100%; width: 1px; border: none; 
vertical-align: middle; visibility: hidden; }

#marco {width: 100%; height : 100%; 
background-color: white; margin: 0; 
position: absolute; overflow: hidden; 
top:0; left: 0; z-index: -1; }


#ojos0 {width: 100%; height: 100%; 
background-color: transparent; margin: 0; 
overflow: hidden; background-image: url('ojos210.gif');}


#ojos1 {width: 100%; height: 100%; 
background-color: transparent; margin: 0; 
margin-top: -100px; overflow: hidden; }

#contenido {height: 100%; text-align: center;}

img{background-color: white;}

span {font: bold 190px sans-serif; 
color:red; position:relative; }

h1 {text-align: left; color: blue; font-size: 200%;}
</style>

</head>
<body>

<div id="marco"> 
<div id="ojos0" style="position: absolute; 
top: 0; left: 0; background-image: url('http://img31.imageshack.us/img31/4550/ojos210.gif');">
</div>

<div id="ojos1" style="position: absolute; 
top: 0; left: 0; background-image: url('http://img31.imageshack.us/img31/4550/ojos210.gif');">
</div>

</div>

<div id="contenido">
<input /><span>OJOS</span>

<h1 style="">Simula una animaci&oacute;n (parapadeo aleatorio) de imagen de fondo.</h1>

<br>
Imagen : <br>
<img width="200px" height="200px" src="http://img31.imageshack.us/img31/4550/ojos210.gif">

<hr id="fin">

</div>

</body>
</html>

Ni hablar que está mejorado en el escript y los estilos, aunque perdió mucho en el diseño; los ojos no parece tanto que parpadearan, sino más bien que se movieran de lugar. En fin, igual se entiende. Y hay gente que se entretiene desarmando estos códigos experimentales, por eso —ya que me acordé— se los dejo.

Saludos

furoya

Imagen :

▒

P.D. : Use un input como espaciador, pero en Chrome no me toma la altura. No es grave, porque no le hace al efecto y se puede reemplazar por una imagen, pero aviso por si alguien lo ve con ese navegador.