vendredi 29 mai 2009
Voici un vieux truc en JavaScript qui permet de faire "voler" les images d'une page avec un superbe effet visuel.
- Rendez-vous sur la page d'accueil de Google, sur Google Image Search ou encore sur le site d'Amazon
- Dans la barre d'adresse de votre fureteur (testé fonctionnel dans IE, Firefox et Chrome), copiez et entrez le code JavaScript suivant à la place de l'URL:
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()',25); void(0); - Faites "Enter" puis admirez le spectacle
Que se passe-t-il exactement dans ce code pour rendre l'effet possible? Regardons la de plus près:
// déclaration et initialisation des variables
R=0;
x1=.1;
y1=.05;
x2=.25;
y2=.24;
x3=1.6;
y3=.24;
x4=300;
y4=200;
x5=300;
y5=200;
// obtenir un array des images contenues dans le document (balises IMG)
DI=document.images;
// combien sont trouvées ?
DIL=DI.length;
// déclaration d'une fonction
function A(){
// pour chaque image
for(i=0; i-DIL; i++){
// changer les propriétés dynamiquement
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++
}
// rappeler la fonction à chaque 25 millisecondes
// pour créer l'effet de déplacement
setInterval('A()',25); void(0);