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).