ça ne vaut pas un pageflip en Flash mais ce type d’animation peut se révéler utile…
Javascript
» Animation pageflip avec jQuery » anti-pixel :: webdev & webdesign
// set constantsvar = 189;// the single page height we\'re usingvar = 146;
// the single page width we\'re usingvar = 0;
// the current Y position of our background-image (in both pages)// When the page is ready
$(document).ready(function(){
/* things in here happen as soon the document is ready */
/* left page turner */
$("#leftpage").click( function() {
= + ;
$("#leftpage")
.css("background-position", "0px "++"px");
$("#flip")
.css("background-position", "top right");
setTimeout (\'$("#flip").css("background-position", "top center");\', 200);
setTimeout (\'$("#rightpage").css("background-position", "146px "++"px");\', 200);
}); // close leftpage click function
/* right page turner */
$("#rightpage").click( function() {
= - ; // note minus page height
$("#rightpage")
.css("background-position", "0px "++"px");
$("#flip")
.css("background-position", "top left");
setTimeout (\'$("#flip").css("background-position", "top center");\', 200);
setTimeout (\'$("#leftpage").css("background-position", "146px "++"px");\', 200);
}); // close rightpage click function
}); // close doc ready
Inclusion de jQuery
<script src="jquery.js" type="text/javascript"></script>
CSS
body { font-family:Arial, Helvetica, sans-serif;text-align:center;}h1{display:none;}
h2 {
clear:both;
}
div#turner {
float:left;
padding-top:11px;
width:302px;
height:210px;
position:relative;
background: transparent url(frame.jpg) 0px 6px no-repeat;
}#leftpage, #rightpage {
float:left;
position:relative;
background-image:url(10page.jpg);
overflow:hidden;
width:146px;
height:189px;
left:5px;
cursor:pointer
}
#leftpage{
background-position:0 0;
}
#rightpage{
background-position:146px 0
}
div#flip {
background: transparent url(3d.png) top center;
height:210px;
width:118px;
position:absolute;
top:0;
left:90px;
z-index:99;
margin-bottom:0;
padding-bottom:0
}
#js {
font-family:"Courier New", Courier, monospace;
font-size:small;
padding:2em;
clear:both
}
#js strong{
color:#003399
}
#js em{
color:#aaa
}
#js p.sc{
color:#c00;
font-weight:700;
margin:0;
padding:0
}
#js .function{
color:#090;
font-weight:700;
}
#js .css{
color:#900;
font-weight:700;
}
.open{display:block;clear:both;font-size:12px;color:#999;}
.credit{display:block;clear:both;font-size:12px;color:#bbb;}
Code HTML
<div id="turner"> <div id="flip"></div><div id="leftpage"></div><div id="rightpage"></div> </div>