nlex a écrit :
tout le monde parle de jQuery
Certes, car effectivement jQuery c'est bien.
nlex a écrit :
que c'est génial par ce que c'est facile de faire des effets
Mouais. Les effets réalisables avec jQuery sont sympa, mais d'une on ne peut pas faire tout et n'importe quoi, et de deux il faut surveiller les performances (notamment sous IE6 et IE7, et/ou sur des machines un peu lentes).
nlex a écrit :
Et puis un simple effet de Fade-In n'est pas possible à coupler à un script de preload ?
Si tu penses à l'effet «tout mon contenu est préchargé puis apparait en fade-in», on peut en dire deux choses:
1. c'est un classique des sites full-Flash, et je soupçonne que ça soit une grosse connerie ergonomique («don't make me wait»), même si je n'ai pas d'infos précises à ce sujet (par ex. des résultats d'études comparatives);
2. le faire au chargement d'une nouvelle page n'est pas évident, mais c'est sans doute jouable;
3. pour un contenu chargé en Ajax, il me semble que c'est un peu plus facile à réaliser, et c'est un effet relativement courant (et un peu plus défendable d'un point de vue ergo).
Pour le #2, je ne sais pas comment il faudrait procéder exactement. En y passant deux-trois heures, je pourrais sans doute mettre sur pied une démo et la tester dans les différents navigateurs. Donc si tu as les bases nécessaires en JavaScript et en jQuery, et deux-trois heures devant toi, tu devrais arriver à quelque chose.
Quelques précisions qui vont bien:
- Faire un fade-in d'un DIV en jQuery, c'est simple (
$("sélecteur CSS pour mon DIV").hide().fadeIn();).
- Tu peux même en faire un sur l'élément BODY (
$(document.body).hide().fadeIn();), ceci dit je ne suis pas sûr que ça passe bien dans tous les navigateurs... avoir un DIV comme conteneur global et appliquer l'effet sur le DIV, c'est sans doute mieux.
- La grande question est de savoir QUAND appliquer l'effet, et en fonction de quelles contraintes. Un conseil: afficher le contenu le plus tôt possible, même s'il manque des illustrations. Bien sûr, si le contenu chargé est une galerie d'images avec des miniatures, ou une image avec une légende, c'est pas forcément une bonne idée. Mais quand même.
- Pour un effet de fade-in sans attendre le chargement des images, au chargement de la page, tu devrais pouvoir faire ça directement suite à l'évènement DomReady (très simple en jQuery, voir le tutoriel de base).
- Si tu veux surveiller le chargement des images, il faudra sans doute afficher le contenu en dehors du viewport (par exemple avec un
position:relative;left:-5000px) pour que les images se chargent. Si le contenu est masqué (en visibility:hidden ou display:none), à priori les images ne se chargeront pas. Ou bien tu peux masquer le contenu en JS après en avoir fait une copie, récupérer les sources des images, précharger les images, puis afficher le contenu (pas forcément dans cet ordre pour que ça marche). Déjà, ça commence à être pas évident. Et avant d'afficher le contenu, il va falloir surveiller le chargement des images (jQuery propose la méthode load() qui peut aider.) Bref, c'est du boulot et ça demande une bonne maitrise des bases de JavaScript et/ou jQuery (notons qu'apprendre les bases de jQuery sans connaitre celles de JavaScript, ben c'est pas recommandé).
- Si tu veux n'afficher le contenu que si sa mise en forme est complète, images d'arrières-plans CSS compris, ça risque d'être difficile. Je ne connais pas de moyen en JavaScript de vérifier que le navigateur a bien chargé une image utilisée en background CSS. C'est peut-être possible.
nlex a écrit :
En tout cas moi je trouve cet effet très bien 
<troll> Libre à toi d'avoir des gouts douteux.
</troll>
Plus sérieusement, c'est à juger au cas par cas. Les critères pour juger de l'intérêt d'un effet d'animation doivent être esthétiques et ergonomiques. L'esthétique, c'est assez subjectif, et je pense que les critères ergonomiques devraient prendre le pas dans la plupart des cas. La question à se poser pour un effet d'animation est: quel est le message transmis? Un effet d'animation au survol d'un élément indique un élément cliquable ou actif (affordance). Un effet de fade-in peut indiquer le changement ou la mise à jour d'un contenu... mais s'il est doublé par une indication de changement de page (page blanche, barre de progression du navigateur...), il peut faire doublon et amener l'utilisateur à se demander ce qu'il s'est passé «en plus» et sur quoi on veut attirer son attention. À manier avec prudence, donc.
Modifié par Florent V. (12 Nov 2009 - 12:16)
