1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
|
currentValue = 0;
function switch_page(old_page_radio) {
var old_page = currentValue;
var new_page = old_page_radio.value;
currentValue = old_page_radio.value;
if (old_page > new_page) {
for (i = old_page-1; i >= new_page; i--) {
document.getElementById("page_"+i).style.animation="none";
animation_launch_previous(i, 1+((old_page-i-1)*200));
}
} else if (old_page < new_page) {
for (i = old_page; i < new_page; i++) {
document.getElementById("page_"+i).style.animation="none";
animation_launch_next(i, 1+((i-old_page)*200));
}
}
}
function animation_launch_next(iteration, time) {
setTimeout(function(){
document.getElementById("page_"+iteration).style.animation="turn 3s linear";
document.getElementById("page_"+iteration).style.transform="rotate(-180deg)";
document.getElementById("page_"+iteration).style.top="525px";
document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.height="0";
document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.animation="hide_recto 3s linear";
document.getElementById("page_"+iteration).getElementsByClassName("verso")[0].style.animation="show_verso 3s linear";
},time);
setTimeout(function(){
document.getElementById("page_"+iteration).style.zIndex=iteration;
},1500+time);
}
function animation_launch_previous(iteration, time) {
setTimeout(function(){
document.getElementById("page_"+iteration).style.animation="turn 3s linear reverse";
document.getElementById("page_"+iteration).style.transform="rotate(0)";
document.getElementById("page_"+iteration).style.top="25px";
document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.height="500px";
document.getElementById("page_"+iteration).getElementsByClassName("recto")[0].style.animation="show_recto 3s linear";
document.getElementById("page_"+iteration).getElementsByClassName("verso")[0].style.animation="hide_verso 3s linear";
},time);
setTimeout(function(){
document.getElementById("page_"+iteration).style.zIndex=1;
},1500+time);
} |
Partager