vendredi 29 mai 2009

Images volantes en JavaScript

Voici un vieux truc en JavaScript qui permet de faire "voler" les images d'une page avec un superbe effet visuel.
  1. Rendez-vous sur la page d'accueil de Google, sur Google Image Search ou encore sur le site d'Amazon
  2. 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);

  3. 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);

Aucun commentaire:

Publier un commentaire