PB script Pageflip.

chabgyver Messages postés 159 Date d'inscription dimanche 17 juillet 2011 Statut Membre Dernière intervention 28 janvier 2020 - 21 janv. 2012 à 16:26
chabgyver Messages postés 159 Date d'inscription dimanche 17 juillet 2011 Statut Membre Dernière intervention 28 janvier 2020 - 22 janv. 2012 à 14:34
Bonjour,

J'ai téléchargé un script en html5 dans le but de faire un flip book tout simple, voilà ce que ça donne pour l'instant :

http://thierry.chabenat.free.fr/press-book/index.html

Je me heurte à 3 soucis :

D'une part, il m'est impossible d'écrire sur la page de gauche, ensuite, quand je tourne la page, elle semble transparente, or, j'ai pas envie de ça et pour finir, même si quand je clique sur l'image, elle apparait en grand, elle n'apparait pas comme je voudrai, c'est à dire comme dans l'exemple ci-dessous :

http://thierry.chabenat.free.fr/creations/infographie-2D/

Le script que j'utilise est trouvable ici :

http://thierry.chabenat.free.fr/press-book/press-book.rar

Merci d'avance pour votre aide.

5 réponses

@karamel Messages postés 1816 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 30 novembre 2022 145
21 janv. 2012 à 18:21
bonjour dans le css met le z-index a 5

#pageflip-canvas {
position: absolute;
z-index: 5;
}
0
chabgyver Messages postés 159 Date d'inscription dimanche 17 juillet 2011 Statut Membre Dernière intervention 28 janvier 2020
21 janv. 2012 à 20:07
Le z-index à 5 empêche le clic sur l'image que j'ai mis.
0
chabgyver Messages postés 159 Date d'inscription dimanche 17 juillet 2011 Statut Membre Dernière intervention 28 janvier 2020
21 janv. 2012 à 20:09
Je pense qu'il faut pas seulement modifier le CSS mais aussi et surtout le fichier JS


(function() {

// Dimensions of the whole book
var BOOK_WIDTH = 870;
var BOOK_HEIGHT = 750;

// Dimensions of one page in the book
var PAGE_WIDTH = 420;
var PAGE_HEIGHT = 730;

// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;

// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 60;

var page = 0;

var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );

var mouse = { x: 0, y: 0 };

var flips = [];

var book = document.getElementById( "book" );

// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );

// Organize the depth of our pages and create the flip definitions
for( var i 0, len pages.length; i < len; i++ ) {
pages[i].style.zIndex = len - i;

flips.push( {
// Current progress of the flip (left -1 to right +1)
progress: 1,
// The target value towards which progress is always moving
target: 1,
// The page DOM element related to this flip
page: pages[i], 
// True while the page is being dragged
dragging: false
} );
}

// Resize the canvas to match the book size
canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );

// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";

// Render the page flip 60 times a second
setInterval( render, 1000 / 60 );

document.addEventListener( "mousemove", mouseMoveHandler, false );
document.addEventListener( "mousedown", mouseDownHandler, false );
document.addEventListener( "mouseup", mouseUpHandler, false );

function mouseMoveHandler( event ) {
// Offset mouse position so that the top of the book spine is 0,0
mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
mouse.y = event.clientY - book.offsetTop;
}

function mouseDownHandler( event ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x) < PAGE_WIDTH) {
if (mouse.x < 0 && page - 1 >= 0) {
// We are on the left side, drag the previous page
flips[page - 1].dragging = true;
}
else if (mouse.x > 0 && page + 1 < flips.length) {
// We are on the right side, drag the current page
flips[page].dragging = false;
}
}

// Prevents the text selection
event.preventDefault();
}

function mouseUpHandler( event ) {
for( var i = 0; i < flips.length; i++ ) {
// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x < 0 ) {
flips[i].target = -1;
page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
page = Math.max( page - 1, 0 );
}
}

flips[i].dragging = false;
}
}

function render() {

// Reset all pixels in the canvas
context.clearRect( 0, 0, canvas.width, canvas.height );

for( var i 0, len flips.length; i < len; i++ ) {
var flip = flips[i];

if( flip.dragging ) {
flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
}

// Ease progress towards the target value 
flip.progress += ( flip.target - flip.progress ) * 0.2;

// If the flip is being dragged or is somewhere in the middle of the book, render it
if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
drawFlip( flip );
}

}

}

function drawFlip( flip ) {
// Strength of the fold is strongest in the middle of the book
var strength = 1 - Math.abs( flip.progress );

// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );

// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;

// How far the page should outdent vertically due to perspective
var verticalOutdent = 20 * strength;

// The maximum width of the left and right side shadows
var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );


// Change page element width to match the x position of the fold
flip.page.style.width = Math.max(foldX, 0) + "px";

context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );


// Draw a sharp shadow on the left side of the page
context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();


// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');

context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();


// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');

context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
context.lineTo(foldX - foldWidth, 0);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
context.fill();


// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, '#fafafa');
foldGradient.addColorStop(0.73, '#eeeeee');
foldGradient.addColorStop(0.9, '#fafafa');
foldGradient.addColorStop(1.0, '#e2e2e2');

context.fillStyle = foldGradient;
context.strokeStyle = 'rgba(0,0,0,0.06)';
context.lineWidth = 0.5;

// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX - foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);

context.fill();
context.stroke();


context.restore();
}

})();


0
@karamel Messages postés 1816 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 30 novembre 2022 145
22 janv. 2012 à 13:20
le probleme c'est que l'effet de page est fait avec un canvas qui est placé au devant des elements html c'est pour ca que l'on ne peut pas cliquer sur les elements et si on le met a l'arriere des elements html l'effet n'est plus visible
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
chabgyver Messages postés 159 Date d'inscription dimanche 17 juillet 2011 Statut Membre Dernière intervention 28 janvier 2020
22 janv. 2012 à 14:34
Si je comprend bien, il faudrai entièrement ré-écrire le script, bon, ben, comme ce n'est pas à ma portée, je mettrai un autre système, tant pis.
0