Navegando por Internet he encontrado un curioso ejemplo de javascript no intrusivo que por su sencillez y espectacularidad me gustaría compartir con ustedes. Creo que antes de comenzar con ninguna explicación lo mejor será que lo prueben:
- Para ello vaya a su navegador favorito (google) y accedan a la sección de búsqueda de imágenes.
- Realicen la búsqueda que prefieran, por ejemplo «hellogoogle» y pulse en buscar para ver todos los resultados.
- Una vez llegado a este punto copie la siguiente linea de código y péguela en su navegador (Como si se tratara de la dirección de una web):
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0); - Pulse enter…¿Sorprendido?
Aunque a pesar de su sencillez es un efecto muy espectacular, no se trata de ningún truco de prestidigitación. La explicación hay que buscarla en el javascript no intrusivo, si analizamos el código para ver cómo se consigue este efecto puede sacar algunas conclusiones interesantes:
- En primer lugar hay que tener presente que el código javascript se ejecuta después haber cargado una página web en el navegador. En nuestro caso era la página de resultados de una búsqueda de imágenes.
- Cuando un navegador web carga una página crea una estructura de objetos en memoria denominada DOM (Document Object Model). Esta modelo de objetos puede ser consultado e incluso modificado a través de un lenguaje de scripting como javascript.
- Por ejemplo en el array document.images se almacena una referencia a cada imagen del documento:
DI=document.images //Array con las imagenes del DOM
- Podemos determinar fácilmente la longitud de este Array con el atributo length para poder recorrerlo con un bucle for:
DIL=DI.length
for(i=0; i-DIL; i++)
{
...
}
- Los atributos de cada una de las imágenes de la página puede ser modificado con javascript accediendo al DOM:
DIS=DI[ i ].style; // Obtenemos una referencia al atributo style
- Así podemos modificar el atributo position que por defecto es block a absolute . Un elemento con posicionamiento absolute puede ser posicionado en cualquier coordinada de la página a través de los atributos top y left:
DIS.position='absolute'; //Modificamos el posicionamiento a absolute
DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; //Actualizamos el atributo left
DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++} /Actualizamos el atributo top
-
Por último se crea de un temporizador con la función setInterval que ejecuta cada 5 milisegundos la función A que es la que realiza el movimiento de las imágenes modificando sus atributos top y left:
setInterval('A()',5); void(0);
-
nota: Aunque no tiene relación directa con el javascript no intrusivo la función que realiza el movimiento de las imágenes es una función helicoidal. Variando los parámetros de la función podemos conseguir que las imágenes describan otros parábolas:
javascript:R=0; x1=.01; y1=.005; x2=.025; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300;y5=200;DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);
La utilidad del javascript no intrusivo no se limitan a este tipo de ejemplos curiosos, si no que es una herramienta de gran importancia a la hora de realizar webs accedibles que no dependan de que el navegador del visitante soporte o no javascript. Esto lo veremos sin duda en próximos artículos.
Fuente de la noticia original: This is freaking insane.
Nota: Este artículo ha sido indexado por Google en 4 minutos, nunca dejarás de sorprenderme baby.
Como siempre, acudo a tu blog en busca de ayuda. He creado un blog, http://latiendadevidas.blogspot.com, y ahora quiero ponerle un logo que se vea en la barra de direcciones, como el tuyo de hg. ¿Cómo se hace? Hay alguna aplicación?¿Cómo se añade?
Hola.
En el caso de un blog alojado bajo blogspot no estoy seguro que puedas conseguirlo al no tener un acceso completo al servidor. En cualquier caso te comento cómo hacerlo porque es bastante sencillo, sigue estos pasos:
1. Crea tu icono con cualquier utilidad tipo http://www.genfavicon.com/es/
Encontrarás muchas herramnientas de este tipo si le preguntas a Google: http://www.google.es/search?hl=es&q=favicon+online&btnG=Buscar+con+Google&meta=
2. Una vez que hayas generado la imagen favicon.ico subela a tu servidor y alójalo en alguna carpeta.
3. Incluye en tu página la siguiente meta-información:
<link rel="shortcut icon" href="(url donde hayas alojado tu favicon.ico)" />
Coméntame si pudiste oonseguirlo. Suerte!
Bueno, de momento he creado el icono y lo he alojado en imageshack, he creado la meta-información y la he incluido. Ahora creo que debo localizar la meta-informacion predefinida para cambiarla, pero ahora no hay tiempo. Seguiré informando. Gracias
La verdad que este efeto esta muy muy bueno !! quede maravillado !!
EXCELENTE 😀
muy buen efecto solo se puede con imagenes’ o tambien se podria con texto por que me interesaria agregarlo a mi web http://directoriocolombia.co.cc/
Para hacerla mas llamativa
Hola, puedes aplicarlo a cualquier elemento de una página. Lo único que necesitas en inlcuir en el array «DI» una referencia a aquellos elementos que quieras desplazar.
Hola: ¿podemos controlar también las imagenes que se cargan a través del css? por ejemplo background. Gracias.-