- Erreur
Tutoriaux
Administrateur
Mai 11
|19:59
Mise à jour le Lundi, 11 Mai 2009 20:16
Vous avez certainement déjà remarqué cette nouvelle tendance ; Page peel effect ou Effet de page afin d'afficher de la publicité. Si vous ne savez pas ce que c'est, l'effet en question permet de "peler" le coin d'une page afin de voir un message sous ce dernier. Sinon regarder l'image ci-dessous, elle est peut-être plus représentative pour vous. Dans la majorité des cas, ces effets son générés grâce à un peu de Flash. Voyons comment créer cet effet grâce à jQuery et CSS et éviter l'emploi du Flash dans votre site.
HTML
Le bloc "pageflip" agit comme un conteneur afin de recevoir le message à afficher.
<div id="pageflip"> <a href="#"> <img src="/page_flip.png" alt="" /> <span class="msg_block">Inscription au flux RSS</span> </a> </div>
CSS
Les propriétés de l'image du coin arrondi doivent être plus petites que la grandeur de l'image réelle (50px par 50px). De plus, l'image doit être placée en position "absolute" dans le coin supérieur droit. Le principe en question permet de masquer une partie d'une image et seulement une portion de cette dernière est visible. L'image masque donc le bloc "msg_block". Par défaut, ce dernier aura 50px par 50px et il sera aussi positionné dans le coin supérieur droit.
#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(subscribe.png) no-repeat right top;
text-indent: -9999px;
}
jQuery
Pour ce qui est de la partie jQuery, ce dernier modifie les dimensions des blocs ainsi que du masque.
$("#pageflip").hover(function() { //On hover...
$("#pageflip img , .msg_block").stop()
.animate({ // Anime et étend la taille de l'image et de la boite de message ; width + height
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop() // Lors du survol (OUT) de la souris ; Retour à la taille original 50x52
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop() // Lors du survol (OUT) de la souris ; Retour à la taille original 50x50
.animate({
width: '50px',
height: '50px'
}, 200);
});
Envoyer par mail
Vu: 2439
Commentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Réseaux sociaux
