Reproduire l’effet Apple.com grâce à un plugin jQuery
Ceux qui me suivent sur Twitter ont pu le découvrir en exclusivité (pour rappel, je suis vinch01 sur Twitter), j’ai écrit mon premier plugin jQuery pour reproduire l’effet qu’on a pu voir récemment sur le site Apple.com (nouveau MacBook Air, les Beatles sur iTunes, etc.)
Si vous ne voyez pas ce que je veux dire, allez jeter un oeil à la vidéo ci-dessous :
Le fonctionnement de mon plugin est assez simple. J’ajoute quatre blocs (avec un z-index relativement élevé) autour du bloc cible et je fais un fadeOut() sur ces blocs après un temps défini.
Vous pouvez télécharger le plugin sur cette page et y trouver toutes les informations utiles qui vont avec. Je n’ai pas défini de licence claire mais libre à vous d’en faire ce que vous voulez. Je me ferai un plaisir de l’adapter en fonction de vos remarques et conseils.
J’espère que cela vous sera utile. Pour nous, en tout cas, ça le sera sans doute très prochainement.
Petite amélioration possible au passage: utiliser une transition CSS pour les navigateurs le supportant, fallback JS pour IE et FF < 4. Just my two cents
A mon tour de mettre mes 2 cents: ne serait-il pas plus « économique » et plus simple de créer un seul div en overlay (avec un z-inex de 9998 par ex), puis de manipuler l’élément qui contient l’animation pour lui donner un z-index supérieur (9999) ?
Oui ça permettrait en plus de pouvoir avoir du contenu autour sans l’éclater dans plusieurs div (sur l’exemple avec le macbook air, à droit on peut voir le bord de la main qui disparait avec le fondu)
Vous avez sans doute raison mais je craignais le bug IE avec les z-index et les positions relative en procédant comme cela –> http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
Merci tout le monde!
http://www.jfl-media.com/formation-javascript/
Très utile ce plugin par contre c’est vrai qu’il est dommage qu’il n’exploite pas le CSS3 pour la navigateurs qui sont compatibles.