Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant

Posted By Franck Pertegas on 20 Août 2010 in Framework, Javascript, Programmation, Tutoriels | 1 comment

jQuery est un framework agréable et très apprécié des développeurs, notamment grâce à une fluidité et une maniabilité améliorée de coder en javascript. Et je suis tombé sur un tutoriel vraiment bluffant sur les possibilités données via jQuery et l’imagination de développeurs.

Avec Sponsor Flip Wall, vous allez pouvoir réaliser un mur de sponsors, ou autre, avec comme effet, qu’au clique la cellule d’image du sponsor sélectionné se retourne pour dévoiler des informations et un lien. Bien entendu tout ceci peut être adapté et l’effet, que l’on retrouve souvent dans des animations flash, est plutôt fluide et très agréable.

Avec un peu de code PHP, CSS et javascript on peut arriver à ce résultat.

Un fichier css style.css :

[pastacode lang= »css » manual= »body%7B%0A%09%2F*%20Setting%20default%20text%20color%2C%20background%20and%20a%20font%20stack%20*%2F%0A%09font-size%3A0.825em%3B%0A%09color%3A%23666%3B%0A%09background-color%3A%23fff%3B%0A%09font-family%3AArial%2C%20Helvetica%2C%20sans-serif%3B%0A%7D%0A%0A.sponsorListHolder%7B%0A%09margin-bottom%3A30px%3B%0A%7D%0A%0A.sponsor%7B%0A%09width%3A180px%3B%0A%09height%3A180px%3B%0A%09float%3Aleft%3B%0A%09margin%3A4px%3B%0A%0A%09%2F*%20Giving%20the%20sponsor%20div%20a%20relative%20positioning%3A%20*%2F%0A%09position%3Arelative%3B%0A%09cursor%3Apointer%3B%0A%7D%0A%0A.sponsorFlip%7B%0A%09%2F*%20%20The%20sponsor%20div%20will%20be%20positioned%20absolutely%20with%20respect%0A%09%09to%20its%20parent%20.sponsor%20div%20and%20fill%20it%20in%20entirely%20*%2F%0A%0A%09position%3Aabsolute%3B%0A%09left%3A0%3B%0A%09top%3A0%3B%0A%09width%3A100%25%3B%0A%09height%3A100%25%3B%0A%09border%3A1px%20solid%20%23ddd%3B%0A%09background%3Aurl(%22img%2Fbackground.jpg%22)%20no-repeat%20center%20center%20%23f9f9f9%3B%0A%7D%0A%0A.sponsorFlip%3Ahover%7B%0A%09border%3A1px%20solid%20%23999%3B%0A%0A%09%2F*%20CSS3%20inset%20shadow%3A%20*%2F%0A%09-moz-box-shadow%3A0%200%2030px%20%23999%20inset%3B%0A%09-webkit-box-shadow%3A0%200%2030px%20%23999%20inset%3B%0A%09box-shadow%3A0%200%2030px%20%23999%20inset%3B%0A%7D%0A%0A.sponsorFlip%20img%7B%0A%09%2F*%20Centering%20the%20logo%20image%20in%20the%20middle%20of%20the%20.sponsorFlip%20div%20*%2F%0A%0A%09position%3Aabsolute%3B%0A%09top%3A50%25%3B%0A%09left%3A50%25%3B%0A%09margin%3A-70px%200%200%20-70px%3B%0A%7D%0A%0A.sponsorData%7B%0A%09%2F*%20Hiding%20the%20.sponsorData%20div%20*%2F%0A%09display%3Anone%3B%0A%7D%0A%0A.sponsorDescription%7B%0A%09font-size%3A11px%3B%0A%09padding%3A50px%2010px%2020px%2020px%3B%0A%09font-style%3Aitalic%3B%0A%7D%0A%0A.sponsorURL%7B%0A%09font-size%3A10px%3B%0A%09font-weight%3Abold%3B%0A%09padding-left%3A20px%3B%0A%7D%0A%0A.clear%7B%0A%09%2F*%20This%20class%20clears%20the%20floats%20*%2F%0A%09clear%3Aboth%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Un fichier php demo.php avec :

[pastacode lang= »php » manual= »%3C%3Fphp%20%0A%0A%2F%2F%20Each%20sponsor%20is%20an%20element%20of%20the%20%0A%24sponsors%20array%3B%20%0A%24sponsors%20%3D%20array(%0A%09array(‘facebook’%2C’The%20biggest%20social..’%2C’http%3A%2F%2Fwww.facebook.com%2F’)%2C%0A%09array(‘adobe’%2C’The%20leading%20software%20de..’%2C’http%3A%2F%2Fwww.adobe.com%2F’)%2C%0A%09array(‘microsoft’%2C’One%20of%20the%20top%20software%20c..’%2C’http%3A%2F%2Fwww.microsoft.com%2F’)%2C%0A%09array(‘sony’%2C’A%20global%20multibillion%20electronics..’%2C’http%3A%2F%2Fwww.sony.com%2F’)%2C%0A%09array(‘dell’%2C’One%20of%20the%20biggest%20computer%20develo..’%2C’http%3A%2F%2Fwww.dell.com%2F’)%2C%0A%09array(‘ebay’%2C’The%20biggest%20online%20auction%20and..’%2C’http%3A%2F%2Fwww.ebay.com%2F’)%2C%0A%09array(‘digg’%2C’One%20of%20the%20most%20popular%20web%202.0..’%2C’http%3A%2F%2Fwww.digg.com%2F’)%2C%0A%09array(‘google’%2C’The%20company%20that%20redefined%20w..’%2C’http%3A%2F%2Fwww.google.com%2F’)%2C%0A%09array(‘ea’%2C’The%20biggest%20computer%20game%20manufacturer.’%2C’http%3A%2F%2Fwww.ea.com%2F’)%2C%0A%09array(‘mysql’%2C’The%20most%20popular%20open%20source%20dat..’%2C’http%3A%2F%2Fwww.mysql.com%2F’)%2C%0A%09array(‘hp’%2C’One%20of%20the%20biggest%20computer%20manufacturers.’%2C’http%3A%2F%2Fwww.hp.com%2F’)%2C%0A%09array(‘yahoo’%2C’The%20most%20popular%20network%20of%20so..’%2C’http%3A%2F%2Fwww.yahoo.com%2F’)%2C%0A%09array(‘cisco’%2C’The%20biggest%20networking%20and%20co..’%2C’http%3A%2F%2Fwww.cisco.com%2F’)%2C%0A%09array(‘vimeo’%2C’A%20popular%20video-centric%20social%20n..’%2C’http%3A%2F%2Fwww.vimeo.com%2F’)%2C%0A%09array(‘canon’%2C’Imaging%20and%20optical%20technology%20ma..’%2C’http%3A%2F%2Fwww.canon.com%2F’)%0A)%3B%0A%0A%2F%2F%20Randomizing%20the%20order%20of%20sponsors%3A%0A%0Ashuffle(%24sponsors)%3B%0A%0A%2F%2F%20Looping%20through%20the%20array%3A%0A%0Aforeach(%24sponsors%20as%20%24company)%7B%0A%09echo’%3Cdiv%20class%3D%22sponsor%22%20title%3D%22Click%20to%20flip%22%3E%0A%09%3Cdiv%20class%3D%22sponsorFlip%22%3E%3Cimg%20src%3D%22img%2Fsponsors%2F’.%24company%5B0%5D.’.png%22%20alt%3D%22More%20about%20′.%24company%5B0%5D.’%22%20%2F%3E%3C%2Fdiv%3E%0A%09%3Cdiv%20class%3D%22sponsorData%22%3E%0A%09%3Cdiv%20class%3D%22sponsorDescription%22%3E’.%24company%5B1%5D.’%3C%2Fdiv%3E%0A%09%3Cdiv%20class%3D%22sponsorURL%22%3E%3Ca%20href%3D%22′.%24company%5B2%5D.’%22%3E’.%24company%5B2%5D.’%3C%2Fa%3E%3C%2Fdiv%3E%0A%09%3C%2Fdiv%3E%0A%09%3C%2Fdiv%3E%0A%09’%3B%0A%7D%0A%0A%3F%3E » message= » » highlight= » » provider= »manual »/]

Et du javascript dans un fichier script.js :

[pastacode lang= »javascript » manual= »%24(document).ready(function()%7B%0A%2F*%20The%20following%20code%20is%20executed%20once%20the%20DOM%20is%20loaded%20*%2F%0A%0A%24(‘.sponsorFlip’).bind(%22click%22%2Cfunction()%7B%0A%0A%2F%2F%20%24(this)%20point%20to%20the%20clicked%20.sponsorFlip%20element%20(caching%20it%20in%20elem%20for%20speed)%3A%0A%0Avar%20elem%20%3D%20%24(this)%3B%0A%0A%2F%2F%20data(‘flipped’)%20is%20a%20flag%20we%20set%20when%20we%20flip%20the%20element%3A%0A%0Aif(elem.data(‘flipped’))%0A%7B%0A%2F%2F%20If%20the%20element%20has%20already%20been%20flipped%2C%20use%20the%20revertFlip%20method%0A%2F%2F%20defined%20by%20the%20plug-in%20to%20revert%20to%20the%20default%20state%20automatically%3A%0A%0Aelem.revertFlip()%3B%0A%0A%2F%2F%20Unsetting%20the%20flag%3A%0Aelem.data(‘flipped’%2Cfalse)%0A%7D%0Aelse%0A%7B%0A%2F%2F%20Using%20the%20flip%20method%20defined%20by%20the%20plugin%3A%0A%0Aelem.flip(%7B%0Adirection%3A’lr’%2C%0Aspeed%3A%20350%2C%0AonBefore%3A%20function()%7B%0A%2F%2F%20Insert%20the%20contents%20of%20the%20.sponsorData%20div%20(hidden%0A%2F%2F%20from%20view%20with%20display%3Anone)%20into%20the%20clicked%0A%2F%2F%20.sponsorFlip%20div%20before%20the%20flipping%20animation%20starts%3A%0A%0Aelem.html(elem.siblings(‘.sponsorData’).html())%3B%0A%7D%0A%7D)%3B%0A%0A%2F%2F%20Setting%20the%20flag%3A%0Aelem.data(‘flipped’%2Ctrue)%3B%0A%7D%0A%7D)%3B%0A%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

Bien entendu tout le code ici n’est pas complet, pour télécharger le code complet, rendez vous ici.

Démonstration
Source et tutoriel

Articles qui peuvent vous intéresser :

• Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos
• Pajinate – Plugin jQuery – La pagination en javascript
• jQuery – 20 plugins jQuery à retenir
• jqIsoText – Plugin jQuery – Effet de texte isométrique
• YoxView – Plugin jQuery – Une lightbox améliorée