Un effet de porte en jQuery

Publié le par

Aujourd’hui nous allons voir comment créer en jQuery et jQuery UI un effet de porte, avec l’image se séparant en 4 par les coins, révélant ainsi un texte.

Avant tout, il faut comprendre comment s’organiseront les différentes couches:

  • à la base, on trouve la couche contenant le texte (z-index: 0)
  • juste au-dessus, on trouve la couche contenant les morceaux d’image (z-index: 1)
  • tout en haut, on trouve la couche servant de masque au tout (z-index: 2)

La première étape consiste à découper la photo en quatre parties égales. Cette étape peut-être décomposée comme ceci :

1 – On englobe l’image dans une division de mêmes dimensions ne permettant pas les débordements: 

//On englobe notre image avec une div
$(id de votre image).wrap('<div class="imageDoor">');

//Pour simplifier la syntaxe
var door = $(id de votre image).parent('.imageDoor');

//On récupère les dimensions de notre image
var totalWidth = $(id de votre image).width();
var totalHeight = $(id de votre image).height();

//On redimensionne la div, on interdit le débordement, et on la place au-dessus
door.css({'width':totalWidth,'height':totalHeight,'overflow':'hidden','z-index':2});

2 – On remplit la première div :

//On calcule les dimensions des pièces
var width = totalWidth/2;
var height = totalHeight/2;

//On rempli la première division                
door.html('<div class="top-left door"></div><div class="top-right door"></div><div class="bottom-left door"></div><div class="bottom-right door"></div>');

À chaque nouvelle div, on applique la classe suivante :

.door {
    float: left;
    z-index: 1;
    position: relative;
}

3 – On intègre l’image aux différentes sous-divisions :

door.children('.top-left').css({'width':width,'height':height,'background-image':'url("'+obj.attr('src')+'")','background-position': '0px 0px'});
door.children('.top-right').css({'width':width,'height':height,'background-image':'url("'+obj.attr('src')+'")','background-position': width+'px 0px'});
door.children('.bottom-left').css({'width':width,'height':height,'background-image':'url("'+obj.attr('src')+'")','background-position': '0px '+height+'px'});
door.children('.bottom-right').css({'width':width,'height':height,'background-image':'url("'+obj.attr('src')+'")','background-position': width+'px '+height+'px'});

Pour compléter le « sandwich », il reste à rajouter la couche contenant le texte; pour cela, il suffit de compléter la ligne remplissant la première division:

door.html('<div class="top-left door"></div><div class="top-right door"></div><div class="bottom-left door"></div><div class="bottom-right door"></div><div class="text-box"><span class="text">'+votre texte ici+'</span></div>');

Maintenant, il ne reste plus qu’à animer les différentes pièces au survol de la souris:

door.hover(function(){
    door.children('.top-left').animate({'top': -height, 'left': -width }, 1000, 'easeOutBounce');
    door.children('.top-right').animate({'top': -height, 'left': width }, 1000, 'easeOutBounce');
    door.children('.bottom-left').animate({'top': height, 'left': -width }, 1000, 'easeOutBounce');
    door.children('.bottom-right').animate({'top': height, 'left': width }, 1000, 'easeOutBounce');
},function(){
    door.children('.top-left').animate({'top': '0px', 'left': '0px' }, 1000, 'easeOutBounce');
    door.children('.top-right').animate({'top': '0px', 'left': '0px' }, 1000, 'easeOutBounce');
    door.children('.bottom-left').animate({'top': '0px', 'left': '0px' }, 1000, 'easeOutBounce');
    door.children('.bottom-right').animate({'top': '0px', 'left': '0px' }, 1000, 'easeOutBounce');
});

Cet article explique comment a été réalisé un des effets proposés par mon plugin jQuery.imageDoor. Pour voir ce plug-in en action (dont l’effet expliqué dans cet article), rendez-vous ici (en anglais).

Laisser un commentaire