Accueil > jquery > page-peel

{ Page peel }

Introduction

page_peel

Placement des fichiers

Décompressez l'archive à la racine de votre site et placer les fichiers dans les dossiers correspondants

Les images :

background.jpg
bg_topnav.jpg
HP_banner.jpg
logo.gif
page_flip.png
subscribe.png
topnav_stretch.jpg

La partie html

Lier dans l'en-tête de votre page la bibliotèque Javascript jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Puis insérer dans le corps de la page le code suivant

<div id="pageflip"> 
   <a href="#">  		
       <img src="page_flip.png" alt="" />
            <span class="msg_block">Subscribe via RSS</span>
     </a>  
 </div>

La feuille de style

#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;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

Animation avec javascript

$("#pageflip").hover(function() { //On hover...

	$("#pageflip img , .msg_block").stop()
        //Animate and expand the image and the msg_block (Width + height)
          .animate({ 
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {

	$("#pageflip img").stop() 
		//On hover out, go back to original size 50x52
         .animate({
			width: '50px',
			height: '52px'
		}, 220);

	$(".msg_block").stop() 
        //On hover out, go back to original size 50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});