Hola
peinprats, bienvenido.
No sé si levantando el tema a las pocas horas vas a encontrar más gente que te ayude. De hecho, no deberías hacerlo.
Y si no encontraste cómo hacer el efecto me parece que es porque no entendiste los mil ejemplos que hay por toda la web. Porque no debe existir una "a medida", así que los que haya, tendrás que adaptarlos. O mejor, reescribirlos, porque es muy simple.
No vi (y seguramente no voy a ver) tu imagen, pero la descripción parece bastante ajustada. Solamente por eso te dejo este código.
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">
<script type="text/javascript">
var iniX = [135,-2, 135,0, 135,2, 135,2, 135,2, 135,0, 135,-2, 135,-2];
var iniY = [135,-2, 135,-2, 135,-2, 135,0, 135,2, 135,2, 135,2, 135,0];
function explota() {
var miCaja = document.getElementById("caja");
if(iniX[0] > 20){
for(i=0; i<8; i++){
var j = i*2;
iniX[j] = iniX[j] + iniX[j + 1];
iniY[j] = iniY[j] + iniY[j + 1];
miCaja.getElementsByTagName("img")[i].style.left = iniX[j] + "px";
miCaja.getElementsByTagName("img")[i].style.top = iniY[j] + "px";
}
setTimeout(explota, 55);
}
}
onload = explota;
</script>
<style type="text/css">
#caja{ position: relative; height: 300px; width: 305px; background:blue; margin: auto; }
#caja img { width: 40px; position: absolute; top: 135px; left:135px; }
#caja #centro {width: 200px; height: 200px; top: 50px; left: 50px; }
</style>
</head>
<body>
<h2>Desplazamiento paso a paso desde centro de imagen.</h2>
<div id=caja>
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/lentes.png">
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/tongue.png">
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/crap.png">
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/biggrin.png">
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/wink.png">
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/scared.png">
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/borracho.png">
<img src="http://static.forosdelweb.com/fdwtheme/images/smilies/frown.png">
<img src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" id="centro">
</div>
</body>
</html>
Que si no es lo que buscas, se debe parecer bastante.
Igual vas a tener que ajustarlo, Y tener algún conocimiento básico (yo diría "elemental") de javascript.
Te lo explico un poco.
Para empezar uso 9 imágenes, todas en un
div, de las cuales las primeras 8 se van a animar y la última (que queda 'por delante' de las otras) está fija en el medio de la caja para tapar a las demás antes de que empiecen a desplazarse.
Todas tienen posición absoluta, y lo que hace el escript al cargarse el documento es cambiar los valores de
top y
left en las imágenes animadas.
El movimiento es el más simple, para que no tengas problemas en seguirlo, la primera se mueve 2px hacia arriba y 2px hacia la izquierda (top 135-2 \ left 135-2); la segunda lo hace 2px hacia arriba y 0 en el eje X; la tercera 2px arriba y 2px a la derecha (top 135-2 \ left 135+2);...
Como verás en el
array, en este caso usé todos los valores iniciales (que en px son 135 para las coordenadas X o left y 135 para las Y o top) y al lado, en cada siguiente elemento, el valor que hay que sumar o restar para que haga el desplazamiento hacia donde nosotros queremos.
Hay 2 listas o arrays, para que sea más claro, uno para las X y otro para las Y.
A cada paso de 55milisegundos (le das la velocidad que quieras) el escript confirma que el elemento
iniX[0] (el primero, por tomar uno de referencia) no se pase de los 20px a la izquierda, y si lo hace, se detiene para que los emoticones disparados no se terminen saliendo de su caja.
Mientras estén dentro de los límites, captura el elemnto de
array que le corresponde a cada uno por orden (del 0 al 7) y le suma a su posición (para X y para Y) el valor siguiente.
Acá te habrás dado cuenta del por qué hay un cálculo extraño dentro del bucle
for para recorrer los 16 elementos de cada
array con sólo 8 vueltas de la variable '
i'.
Como va aumentando de a uno, de 0 a 7, lo usamos para ubicar las imágenes dentro de 'caja' con DOM; pero como cada
array tiene en total 16 elementos (cada valor de
top o
left, más el valor a sumarle), lo que hacemos para recuperarlos es inventar otra variable '
j' que multiplicada por 2 siempre nos va a traer los elementos pares (0; 2; 4;...) que son los valores de X o Y a cambiar; y con '
j + 1' traemos el valor que le corresponde para hacer ese cambio, que siempre es el siguiente.
Una vez que cambió todos los valores y movió todas las imágenes, espera 55ms y empieza de nuevo.
Como verás, la explicación es más larga que el escript, y de lo más insoportable de leer.
Ni hablar de escribir.
Pero al final el mecanismo es tan simple, que casi ni hacía falta ninguna descripción.
Y no es la única forma de hacer el efecto. Es la única que te voy a postear. Nada más.
El Foro está lleno de escripts "paso a paso" para que estudies y termines haciendo el efecto que más te guste.
Saludos
furoya