Un effet de page cornée en quelques lignes de jQuery

Vous avez certainement déjà croisé ce genre d'animation en Flash qui imite un coin de page cornée qui laisse apparaitre une publicité à son survol ? L'effet est très sympa mais demande Flash.

Je n'ai rien contre Flash, mais ce n'est pas mon univers. Comme vous commencez certainement à le comprendre jQuery est plus ma tasse de thé. Sa puissance ne cessera de m'étonner et permet de réaliser un tel effet en quelques lignes.

L'idée en deux mots

Partons d'un simple lien contenant une image. C'est le cas d'une bannière de publicité.

<a href="http://monsite.com"><img src="mabanniere.png" /></a>

Imaginons maintenant que le lien affiche une illustration en background et que l'image contenue dans le lien reprensente un coin de page dont la partie supérieure est transparente. Ce coin laissera entrevoir l'illustration de fond.

Au survol de la souris, l'image du coin s'agrandit, laissant ainsi entrevoir toute l'illustration. Lorsque la souris s'échappe, le coin reprend sa petite taille et masque l'illustration à nouveau.

Voir la démo

Mise en forme

Modifions à peine notre précédente bannière.

<a id="corner" href="http://monsite.com"><img src="corner.png" /></a>

Elle porte maintenant l'id #corner et contient corner.png, une image de coin de page. Grâce à CSS on applique illustration.png.

---

#corner {
    background:url(illustration.png) top right;
}

Ensuite on place le tout en haut à droite de l'écran. Rien de bien extraordinaire, la feuille de style est la suivante :

#corner {
    background:url(illustration.png) top right;
    position:absolute;
    top:0px; right:0px;
    z-index:9999;
}

A ce stade, l'illustration est encore dévoilée. Il faut juste réduire l'image du coin de page. Vue que l'image est contenue dans un lien, on annule la bordure.

#corner img {
    border:0;
    width:80px; height:80px;
    -ms-interpolation-mode:bicubic;
}

Référez-vous ici pour l'explication du cabalistique -ms-interpolation-mode.

jQuery au boulot

Alors là, attention, faut être attentif car ça va très vite et je ne me répéterai pas ^^

/**
 * Effet page cornée
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
$(function() {
    $('#corner img').hover(function() {
        $(this).stop().animate({ width:'200px', height:'200px' });
    }, function() {
        $(this).stop().animate({ width:'80px', height:'80px' });
    });
});

Lors du survol (.hover) de l'image du coin (#corner img) on anime sa taille(.animate) à 200px sur 200px. On la remet à 80px sur 80px lorsque la souris quitte la zone. A chaque animation, on prend soin de bloquer (.stop) une éventuelle animation déjà lancée.

C'est tout !