City Hunter
Utilisateur : anonyme   Vendredi 19 Avril 2024 
     
Provenance géographique des visiteurs


SOFUN - Blog, article : Diaporama javascript en fondu enchainé dimanche 05 mars 2006 - 23:09
Diaporama javascript en fondu enchainé


 
Depuis une dixaine de jours, j'ai enfin pris le temps d'ajouter une amélioration à mon diaporama en javascript : la transition progressive en dégradé flou.
Ce soir, comme je désespérait de ne trouver de photo pour illustrer joliement cette nouvelle fonctionnalité, je me suis souvenu qu'il m'est arrivé de prendre des vacances. Voici donc sept photos prises aux Arcs (bien qu'il eu été plus facile de les prendre à l'appareil photo), en 2004.
Si je me souviens bien, la photo la moins enneigée correspond à la vallée de Bourg Saint Maurice (t'as avalé le boursin Maurice ?).


Passons maintenant à la partie technique :
Pour la mise en place, la procédure est exactement la même que pour le diaporama en "slide" (je ne trouve pas de mot français pour le désigner). Il suffit ensuite de modifier la ligne :


monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 50, 10, 2000, 500, 600);

... en y ajoutant un nouveau paramètre : 


monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2, 2000, 500, 600, "flou");

La ligne "new Diaporama" s'utilise alors ainsi :
  • 100 : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
  • 2 : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
  • 2000 : temps de pause, en millisecondes, entre chaque transition.
  • 500 : largeur des photos en pixel. La photo réelle doit avoir exactement la même largeur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
  • 600 : hauteur des photos en pixel. La photo réelle doit avoir exactement la même hauteur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
Pour le premier paramètre, je conseille de ne pas le diminuer en dessous de 50 : mon PC, bien qu'il tienne la route, travaille à plus de 50% lors d'une transition à cette cadence, donc il faut penser à vos visiteurs qui peuvent avoir une machine qui commence à souffrir.
De plus, 100 et 2 donnent à peu près le même résultat que 50 et 1.
La durée théorique d'une transition peut être calculée ainsi :
  • paramètre_1 x 100 / paramètre_2 = durée en millisecondes.
  • exemple : 100 x 100 / 2 = 2000 millisecondes, soit 2 secondes.
Voila, je pense que ça devrait suffire comme explication en plus des explications du diaporama en "slide", mais n'hésitez pas à demander des précisions.
Ce script a été testé sur Firefox 1.5 et Internet Explorer 6 dans leur version Windows uniquement.
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.

11/03/06 : après avoir parcouru quelques sites, j'ai vu qu'on appelle cet effet le "fondu enchaîné". Je ne m'en souvenait plus.
 
publié par Forrest
Ajouter un commentaire

Voir les commentaires (0)

Ajouter un commentaire




Nombre de surfeurs égarés en ce moment : 4
SOFUN - Le Site Où il Fallait Un Nom