Sí, el tiempo siempre atenta contra la calidad. Igual el tema sirvió para poner varios ejemplos desarmables y estudiables.
Es más, vuelvo acá porque me parece que es el lugar ideal para responder a una objeción que me hicieron por otro efecto que está en
reloj digital en javascript ke funcione en mozilla #19.
Allí puse un texto (podía ser cualquier elemento) que simulaba un 'rebote' en las paredes del contenedor, como una marquesina
alternate, pero en "diagonal" (digo, para que se entienda el movimiento).
Está hecho con javascript, y le agregué un cambio de colores aleatorios cada vez que pegaba contra uno de los lados.
Como además expliqué que eso venía de otro sitio donde puse versiones hechas realmente con
marquee, lo que me terminaron planteando —no en un foro, sino personalmente— es que ese tipo de 'rebote' no se hace con marquesinas, porque no tiene ningún atributo para desplazarse "
a 45°". Lo que es totalmente cierto. Pero no significa que no se pueda hacer. El truco es viejísimo.
El siguiente ejemplo solamente usa JS para el cambio de colores, donde aprovecho el evento
onbounce, que sí es de
marquee. Lo demás es HTML.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REBOTE Y COLORES AL AZAR.</title>
<script type="text/javascript">
var paleta = new Array();
paleta[0] = ["maroon", "fuchsia", "lime", "aqua", "red"];
paleta[1] = ["fuchsia", "maroon", "olive", "aqua", "teal"];
paleta[2] = ["lime", "blue", "navy", "purple", "maroon"];
paleta[3] = ["aqua", "teal", "red", "maroon", "purple"];
paleta[4] = ["red", "teal", "navy", "purple", "olive"];
paleta[5] = ["navy", "lime", "red", "aqua", "fuchsia"];
function colores() {
var fnd0 = Math.floor(Math.random()*6);
var fnd1 = Math.ceil(Math.random()*4);
document.getElementById("horizontal").style.backgroundColor = paleta[fnd0][0];
document.getElementById("rebota").style.backgroundColor = paleta[fnd0][fnd1];
}
</script>
<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>
<marquee id="horizontal" direction="right"
behavior="alternate" scrollamount="5" scrolldelay="20"
style="height: 300px; width:600px;
background-color: white; " onbounce="colores()">
<marquee id="vertical" direction="up" behavior="alternate"
align="down" scrollamount="5" scrolldelay="20"
style="height: 300px; width:150px; " onbounce="colores()">
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png"
>
</marquee> </marquee>
<p>Cambia colores en forma aleatoria con cada rebote.</p>
</body>
</html>
El problema con los eventos es que ya no son tan compatibles. En
Chrome y
Opera, por ejemplo, no lo pude hacer andar, solamente 'rebota' y no cambia de color.
Si no se entiende la animación, por las dudas, acá dejo otra versión más limpia y con capas destacadas.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>
<marquee id="horizontal" direction="right"
behavior="alternate" scrollamount="5" scrolldelay="20"
style="height: 300px; width:600px;
background-color: white; " title="Marquee horizontal.">
<marquee id="vertical" direction="up" behavior="alternate"
align="down" scrollamount="5" scrolldelay="20"
style="height: 300px; width:150px;" onclick="this.style.backgroundColor='lime'" title="Marquee vertical.">
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png"
>
</marquee> </marquee>
<p>Haciendo un click sobre la imagen se ven los límites de ambas marquesinas.</p>
</body>
</html>
Ahora sí. El tema ya quedó un poco más completo.