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

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.

flip-jquery

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

Un fichier css style.css :

body{
	/* Setting default text color, background and a font stack */
	font-size:0.825em;
	color:#666;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
	margin-bottom:30px;
}

.sponsor{
	width:180px;
	height:180px;
	float:left;
	margin:4px;

	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}

.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */

	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
	border:1px solid #999;

	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset;
}

.sponsorFlip img{
	/* Centering the logo image in the middle of the .sponsorFlip div */

	position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
}

.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}

.sponsorDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:italic;
}

.sponsorURL{
	font-size:10px;
	font-weight:bold;
	padding-left:20px;
}

.clear{
	/* This class clears the floats */
	clear:both;
}

 

Un fichier php demo.php avec :

<?php 

// Each sponsor is an element of the 
$sponsors array; 
$sponsors = array(
	array('facebook','The biggest social..','http://www.facebook.com/'),
	array('adobe','The leading software de..','http://www.adobe.com/'),
	array('microsoft','One of the top software c..','http://www.microsoft.com/'),
	array('sony','A global multibillion electronics..','http://www.sony.com/'),
	array('dell','One of the biggest computer develo..','http://www.dell.com/'),
	array('ebay','The biggest online auction and..','http://www.ebay.com/'),
	array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
	array('google','The company that redefined w..','http://www.google.com/'),
	array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
	array('mysql','The most popular open source dat..','http://www.mysql.com/'),
	array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
	array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
	array('cisco','The biggest networking and co..','http://www.cisco.com/'),
	array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
	array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

// Looping through the array:

foreach($sponsors as $company){
	echo'<div class="sponsor" title="Click to flip">
	<div class="sponsorFlip"><img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" /></div>
	<div class="sponsorData">
	<div class="sponsorDescription">'.$company[1].'</div>
	<div class="sponsorURL"><a href="'.$company[2].'">'.$company[2].'</a></div>
	</div>
	</div>
	';
}

?>

 

Et du javascript dans un fichier script.js :

$(document).ready(function(){
/* The following code is executed once the DOM is loaded */

$('.sponsorFlip').bind("click",function(){

// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

var elem = $(this);

// data('flipped') is a flag we set when we flip the element:

if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:

elem.revertFlip();

// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:

elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:

elem.html(elem.siblings('.sponsorData').html());
}
});

// Setting the flag:
elem.data('flipped',true);
}
});

});

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 :

Author: Franck Pertegas

Share This Post On

1 Comment

  1. Bonjour,
    Je viens d’installer le plugin wp sponsor flip wall sur mon site, tout fonctionne normalement sauf que l’affichage des vignettes sur la page n’est pas correcte. Il y a des barres de défilement autour des images ou logos ce qui cache une partie des images.
    Vous pouvez voir le résultat obtenu à cette adresse : http://www.plumedepoete.fr.fo/partenaires
    Merci de votre aide pour règler ce problème.
    Bien à vous,
    Alain

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery – Afficher une adresse mail sans être spammé | LudiBlog - [...] Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant [...]
  2. Jquery Selected text searcher – Plugin jQuery | LudiBlog - [...] Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant [...]
  3. 62 plugins jQuery sur LudiBlog pour 2014 ! | LudiBlog - […] jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor Flip Wall Easy Gallery ColorBox…

Submit a Comment

Votre adresse e-mail ne sera pas publiée.