Pensé que en este tiempo alguien iba a responder. Aunque más no fuera con un enlace, porque la pregunta seguro ya se hizo antes. Otra cuestión podría ser que este último efecto no tiene mucho que ver con el rollover del comienzo. Pero resulta que preparé un ejemplo donde le inventé un punto de contacto, para así postearlo también acá. :D
Antes del código, digamos que no fui yo quien habló de estas animaciones
Cita:
Iniciado por jj68 ...otra pregunta creo que se hace con javascrip. los o las imagenes que dan vieltas y cuando pasas el raton se para o van mas rapido asta que le haces clik auno como se hace, o me estoy metiendo en mucho...
Lo de los cambios de velocidad habría que discutirlo un poco; por lo demás, se parece mucho a las marquesinas de enlaces, que al acercar el puntero se detienen para que no tengamos que andar persiguiendo los botones por toda la pantalla.
Los menúes giratorios tienen un uso muy limitado. Suelen estar como portadas, y los botones nos llevan a las distintas páginas del sitio. o pueden estar —ya más reducidos— en algún rincón, a modo de banner animado.
Las mías son aseveraciones muy generales, seguramente un buen diseñador puede crear un caso más particular donde quede bien en medio del documento, pero no es algo que vayamos a debatir entre tú y yo.
Por otro lado, los botones deben ser todos del mismo tamaño, muy preferentemente circulares o cuadrados. Ya vi que tampoco es tu caso.
Y aprovecho que estamos en "tu caso" para comentar que el cambio de rollover se podría hacer con la técnica de
sprite. Es mucho más eficiente y apenas más complicada.
Bueno, vamos al punto. Resulta que la rotación o giro de botones es una animación que ya se sale de los límites del tema. Pero si lo pensamos un poco, "rotación" es también el efecto que hace el rollover. Quiero decir, que hay un botón o una imagen, y al ponerle el cursor encima se cambia por otro/a. En el caso de la "rotación" de banners, el cambio suele ser automático y aquí el cambio lo hacemos manual. Pero es basicamente lo mismo.
Todo esto me recordó un truco, un efecto visual, que muestra una rotación (cambio) secuenciada, y simula una rotación (giro) de la rueda de botones.
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>MENÚ GIRATORIO.</title>
<script type="text/javascript">
var guarda, paso = 1;
function gira1(){
if(paso == 1){
guarda = document.getElementById("P0").innerHTML;
for(f=0;f<=329;f+=30){
document.getElementById("P"+f).innerHTML =
document.getElementById("P"+(f+30)).innerHTML;
}
document.getElementById("P330").innerHTML = guarda;
}
setTimeout("gira1()" , 500);
}
onload = gira1;
</script>
<style type="text/css">
body, html {font-size:100%; background-color:#000000; color: #ffffff; }
#caja {font-size: 30px; font-weight: 900; height: 5em; position: relative;
font-family: "arial unicode ms", "lucida sans unicode", sans-serif; width: 320px;
height: 320px; cursor: no-drop; }
#caja p {text-align: center; width:50px; height: 50px; position: absolute; }
#Ctro {position: absolute; top: 120px; left: 120px; }
#aster {position: absolute; top: 100px; left: 320px; color: #ffff00; font-size: 100px;
font-weight: bold; }
a {cursor: pointer; text-decoration: none; }
a.fuego:link, a.fuego:visited {color: #ff9999; }
a.fuego:hover {color: #ff0000 }
a.agua:link, a.agua:visited {color: #9999ff; }
a.agua:hover {color: #0000ff; }
a.tierra:link, a.tierra:visited {color: #d2b48c; }
a.tierra:hover {color: #f3c49c; }
a.aire:link, a.aire:visited {color: #999999; }
a.aire:hover {color: #cccccc; }
#Ctro a:link {color: #ffffff; }
#Ctro a:hover {color: #ffff00; }
</style>
</head>
<body>
<h2>Zodíaco.</h2>
<div id="caja" onmouseover="paso=0" onmouseout="paso=1">
<p style="top: 120px; left: 240px" id=P0><a class="agua" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/C%C3%A1ncer_(astrolog%C3%ADa)">♋</a></p>
<p style="top: 179px; left: 223px" id=P30><a class="fuego" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Leo_(astrolog%C3%ADa)">♌</a></p>
<p style="top: 223px; left: 180px" id=P60><a class="tierra" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Virgo_(astrolog%C3%ADa)">♍</a></p>
<p style="top: 239px; left: 120px" id=P90><a class="aire" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Libra_(astrolog%C3%ADa)">♎</a></p>
<p style="top: 223px; left: 60px" id=P120><a class="agua" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Escorpio_(astrolog%C3%ADa)">♏</a></p>
<p style="top: 180px; left: 16px" id=P150><a class="fuego" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Sagitario_(astrolog%C3%ADa)">♐</a></p>
<p style="top: 120px; left: 0px" id=P180><a class="tierra" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Capricornio_(astrolog%C3%ADa)">♑</a></p>
<p style="top: 60px; left: 16px" id=P210><a class="aire" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Acuario_(astrolog%C3%ADa)">♒</a></p>
<p style="top: 16px; left: 59px" id=P240><a class="agua" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Piscis_(astrolog%C3%ADa)">♓</a></p>
<p style="top: 0px; left: 119px" id=P270><a class="fuego" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Aries_(astrolog%C3%ADa)">♈</a></p>
<p style="top: 16px; left: 179px" id=P300><a class="tierra" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Tauro_(astrolog%C3%ADa)">♉</a></p>
<p style="top: 59px; left: 223px" id=P330><a class="aire" onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/G%C3%A9minis_(astrolog%C3%ADa)">♊</a></p>
<p id="Ctro"><a onmouseover="paso=0"
href="http://es.wikipedia.org/wiki/Asesino_del_Zodiaco">⌖</a></p>
</div>
<p><b>* Homenaje a <u>Zodiac</u> (2007), de David Fincher.</b></p>
<div id="aster">*</div>
</body>
</html>
Por supuesto, aquí no se mueve nada, es sólo un reemplazo de contenido, pero da la ilusión de un giro antihorario de los signos. El tamaño y la combinación de colores es importante para que se vea minimamente creíble. Y una animación "angular" le ganaría por goleada. Pero es lo mejor que se me ocurrió para meter en este tema y no tener que saltar a otro.
girar un div??? Sprites css Diferentes MouseOver's a una Imagen ayuda con marquee 122.- Cómo poner un reloj analógico en mi web Reloj analógico
P.D. : Mmmmm. Me parece que de un tiempo para acá, ya estoy homenajeando cualquier cosa.