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)

SOFUN - Blog, article : Roll-Over progressif en javascript mercredi 14 décembre 2005 - 21:28
Roll-Over progressif en javascript


 
Il y a quelques temps, je faisai découvrir mon rollover progressif à l'occasion du coloriage de mon site.
A partir d'aujourd'hui, vous pourrez vous même utiliser de petit outil que j'ai réalisé moi même (ce n'est pas une simple récupération sur le net).
Afin de montrer les possibilités de ce module, positionnez votre souris au dessus de la photo et celle-ci va être progressivement remplacée par une autre. Avec les réglages sur cet article, la transition est complète en trois secondes à peu de choses près.



Je me suis moi-même surpris par la qualité de cette transition (avec ces deux photos en particulier) qui n'utilise que deux images, comme un rollover classique. Concernant mon aspect vieillit, celui-ci a été réalisé à l'aide du logiciel Face Transformer découvert dans l'article de Ludo. Un autre exemple de mise en application de ce rollover progressif est visible sur cet article de MP qui n'a pas résisté à la tentation.

Quant à l'utilisation de ce module, c'est très similaire à l'utilisation du diaporama et en voici le mode d'emploi :
  • insérez le code suivant à l'emplacement souhaité :
    <script src="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js"></script>
<script>
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, 25, 1, 1000, 163, 200);
	monRolloverFlou[nouveau_id_rollover].ajouteCadre(3, "#000000");
	monRolloverFlou[nouveau_id_rollover].place("http://mon.serveur.fr/.../photo_01.jpg",
		"http://mon.serveur.fr/.../photo_02.jpg");
</script>

  • apportez les modification suivantes :
    • ligne "new RolloverFlou" :
      • 25 : temps, en millisecondes, entre chaque variation de l'opacité des photos. Plus le nombre est grand, plus la transition est longue, et inversement.
      • 1 : pourcentage de variation de l'opacité à chaque cycle. Varie entre 1 et 99. Plus le nombre est petit, plus la transition est fluide et longue.
      • 1000 : ce paramètre ne sert à rien pour le moment. Ce n'est qu'un résidut provenant du diaporama. Pas besoin d'y toucher.
      • 163 : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
      • 200 : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
    • ligne "ajouteCadre" : une ligne facultative qui permet d'ajouter une bordure au rollover.
      • 3 : épaisseur de la bordure en pixels.
      • #000000 : code couleur pour la bordure.
    • ligne "place" : permet de définir les deux photos du rollover et d'afficher le résultat. La ligne est volontairement découpée en deux lignes, mais il s'agit là d'un choix de lisibilité. N'oubliez pas de mettre les adresses de vos photos à la place des miennes ;)
Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques de voir Jean-Pierre COFFE débarquer chez vous pour critiquer votre stock alimentaire, ça ne m'est jamais arrivé sinon une crise cardiaque l'aurai terrassé). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger ici. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.

Bien sur, comme il s'agit de javascript, les utilisateurs d'overblog qui sont toujours en mode "Confiance" devront attendre de passer en mode "Privilège" pour pouvoir l'utiliser.

Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.
Je vous invite également à laisser un commentaire avec le lien de vos réalisation afin de montrer que ça marche ailleurs qu'ici.
J'invite également les utilisateurs de Mac à me confirmer le bon fonctionnement de cet outils sur leur navigateur préféré ou à m'informer de tout problème car je n'ai testé que sous Windows XP avec Internet Explorer 6.0 et Firefox 1.5 (le tout en version française).
 
publié par Forrest
Ajouter un commentaire

Voir les commentaires (22)

SOFUN - Blog, article : Mise à jour du diaporama en javascript mardi 06 décembre 2005 - 15:06
Mise à jour du diaporama en javascript


 
Ce midi, j'ai reçu un mail de Legnoch me signalant un problème sur le diaporama en javascript. "Ô rage, Ô désespoir", pensais-je alors pendant trois secondes.

Après avoir brièvement examiné le problème, et ayant constaté que celui-ci ne se produit qu'avec Firefox sur Overblog, je m'en suis remis à cette conclusion : "zut, je vais devoir réfléchir".

Résumons d'abord le problème, étant donné que certains peuvent ne pas le constater : il s'agit d'un problème de répétition ou de débordement de l'image sur la droite. Ce problème ne survient que pour les surfeurs équipés de la dernière version de Firefox (version 1.5) lors de la navigation sur Overblog.

Après avoir pris la peine de me pencher sur le problème, celui-ci a été résolu et ne vaut même pas d'être détaillé car il s'agissait d'un simple problème d'alignement.
De plus, j'en ai profité pour effectuer une toute petite amélioration qui sera tout de même bien utile pour ceux qui utilisent des cycles de rotation assez long : celle-ci permet de réduire à une seconde la durée maximale d'attente lors de la reprise après une mise en pause. Cette durée maximale était calculée sur le délai avant une nouvelle rotation et pouvait engendrer, par exemple, une attente de 7 à 14 secondes avant la reprise d'un diaporama dont le temps d'affichage fixe était de 7 secondes.

Me voici donc en mesure de mettre à votre disposition cette dernière version que vous pouvez télécharger ici. (Avec Firefox, il faut faire un "clic droit" sur le lien puis "Enregistrer la cible du lien sous...").
Ce fichier mis à jour est la version 5.12.06 : il s'agit simplement de la date de dernière modification. Ce numéro de version est inscrit à l'intérieur du fichier pour savoir de quelle version chacun dispose.
La version précédente n'est désormais plus disponible, et les personnes utilisant directement le script à partir de ce site n'ont rien à faire : leurs diaporamas utilisent maintenant le nouveau script.
 
publié par Forrest
Ajouter un commentaire

Voir les commentaires (15)

Plus anciens




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