Flip book HTML5 par AntoineSama - page 1

Bonjour amis zéros zéros.5 et un

Je me tourne vers vous pour me donner un petit coup de pouce pour réaliser un flip book en HTML5 comme l'indique le titre.
Je suis tombé l'autre jour sur le flipbook de la team googlechrome du nom de 20 things I learned about browser and internet. Disponible à cette adresse à la lecture ici là

Lecture pour le moins passionnante je dois l'avouer, et je le conseil !
J'ai par la suite appris que le code source de ce livre est sous licence GNU donc disponible, j'ai donc voulu le reprendre pour l'utiliser sur un de mes projets de site. J'ai trouvé un tuto très bien fait en Anglais à cette adresse qui me donne le code pour réaliser l'intérieur du livre ce qui donne ceci : --test--
Néanmoins avec ça je n'ai pas l'effet d'ouverture de la couverture comme le livre d'origine de google le fait.

J'aimerais donc un petit coup de main pour me mettre sur la voie pour trouver comment réaliser cette effet.

Je vous met ici le code du tuto que je cite plus haut, avec mes commentaires en français pour ceux que ça intéresseraient.

Le code HTML5

<html>
    <head>
		<meta charset="utf-8" />
		<title>Page Flip HTML</title>
		<link href="design.css" rel="stylesheet" media="screen" />
	</head>
	<body>
		<div id="book">
		  <canvas id="pageflip-canvas"></canvas>
		  <div id="pages">
			<section>
			  <div><h2>Titre 1</h2>
			  <p>contenu</p></div>
			</section>
			<section>
			  <div><h2>Titre 2</h2> 
			  <p>contenu</p></div>
			</section>
			<!-- Rajouter des pages en rajoutant des <section>s -->
		  </div>
		</div>
		<script type="text/javascript" src="pageflip.js"></script>
	</body>
</html>

Le CSS

body, h2, p 
{
	margin: 0;
	padding: 0;
}

body 
{
	background-color: #444;
	color: #333;
	font-family: Helvetica, sans-serif;
}

#book 
{
	background: url("book.png") no-repeat;
	position: absolute;
	width: 830px;
	height: 260px;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -125px;
}

#pages section 
{
	background: url("paper.png") no-repeat;
	display: block;
	width: 400px;
	height: 250px;
	position: absolute;
	left: 415px;
	top: 5px;
	overflow: hidden;
}
	
#pages section>div 
{
	display: block;
	width: 400px;
	height: 250px;
	font-size: 12px;
}
	
#pages section p,
#pages section h2 
{
	padding: 3px 35px;
	line-height: 1.4em;
	text-align: justify;
}
#pages section h2
{
	margin: 15px 0 10px;
}

#pageflip-canvas 
{
	position: absolute;
	z-index: 100;
}

et le javascript (beaucoup plus long)

(function() {
	
	// Dimensions de l'ensemble du livre
	var BOOK_WIDTH = 830;
	var BOOK_HEIGHT = 260;
	
	// Dimensions d'une page dans le livre
	var PAGE_WIDTH = 400;
	var PAGE_HEIGHT = 250;
	
	// Espacement verticale entre le bord du livre et des feuilles de papier
	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
	
	// La taille du canvas correspond aux dimensions du livre + ce 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 = [];
	
	// On choisi tous les élément contenu dans le conteneur div id=book
	var book = document.getElementById( "book" );
	
	// Création d'une liste de tous les éléments section contenu dans le conteneur div id=book
	var pages = book.getElementsByTagName( "section" );
	
	// Organiser la profondeur de nos pages et créer les définitions retourner
	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], 
			// vrai tant que la page est en mouvement
			dragging: false
		} );
	}
	
	// Redimensionner le canvas pour correspondre à la taille de livre
	canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
	canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
	
	// Décalage du canvas de telle sorte que c'est un rembourrage est uniformément répartie autour du livre
	canvas.style.top = -CANVAS_PADDING + "px";
	canvas.style.left = -CANVAS_PADDING + "px";
	
	// Rendu de la page flip 60 fois par seconde
	setInterval( render, 1000 / 60 );
	
	document.addEventListener( "mousemove", mouseMoveHandler, false );
	document.addEventListener( "mousedown", mouseDownHandler, false );
	document.addEventListener( "mouseup", mouseUpHandler, false );
	
	//met à jour la souris de sorte que nous travaillons toujours vers l'emplacement du curseur le plus récent.
	function mouseMoveHandler( event ) { 
		// Position de la souris décalées de sorte que le sommet de la colonne vertébrale du livre soit à 0,0
		mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
		mouse.y = event.clientY - book.offsetTop;
	}
	
	//On contrôle s'il y a un clic sur la gauche ou la droite, et on vérifie qu'il ya une page à ouvrir (fin ou début du livre)
	function mouseDownHandler( event ) {
		// Vérification que le pointeur de la souris est à l'intérieur du livre
		if (Math.abs(mouse.x) < PAGE_WIDTH) {
			if (mouse.x < 0 && page - 1 >= 0) {
				// La souris est sur le coté gauche, donc page précédente à ouvrir
				flips[page - 1].dragging = true;
			}
			else if (mouse.x > 0 && page + 1 < flips.length) {
				// La souris est sur le cotédroit donc page suivante à ouvrir
				flips[page].dragging = true;
			}
		}
		
		// Empèche la sélection de texte
		event.preventDefault();
	}
	
	function mouseUpHandler( event ) {
		for( var i = 0; i < flips.length; i++ ) {
			// Si l'animation à commencée, on envoie la page suivante.
			if( flips[i].dragging ) {
				// Numéro de page
				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() {
		
		// Réinitialisation de tous les pixels
		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 );
			}
			
			// Facilite le progrès vers la valeur cible
			flip.progress += ( flip.target - flip.progress ) * 0.2;
			
			// Si l'animation est en cours ou est au milieu
			// du livre, ouvrir la page
			if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
				drawFlip( flip );
			}
			
		}
		
	}
	
	function drawFlip( flip ) {
		// Détermine la force du pli sur 0-1
		var strength = 1 - Math.abs( flip.progress );
		
		// Largeur du papier plié
		var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
		
		// Position x du papier plié
		var foldX = PAGE_WIDTH * flip.progress + foldWidth;
		
		// How far the page should outdent vertically due to perspective
		var verticalOutdent = 20 * strength;
		
		// Les largeurs maximales des trois ombres utilisés
		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 );
		
		
		// Masque la page en définissant sa largeur pour correspondre à foldX
		flip.page.style.width = Math.max(foldX, 0) + "px";
		
		context.save();
		context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
		
		
		// Dessinez une ombre nette sur le côté gauche de la 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();
		
		
		// Coté droit ombre portée
		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();
		
		
		// Coté gauche ombre portée
		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();
		
		
		// Dégradé appliqué au papier plié (faits saillants et les ombres)
		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;
		
		// Dessiner le morceau de papier plié
		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();
	}
	
})();

Voila sinon le tuto ce trouve à cette page Tuto

Merci par avance à tout le monde
Bonne continuation et bon week end aussi

Antoine

AntoineSama

19 novembre 2011 à 9:14:43

20 novembre 2011 à 17:39:04

Alors quoi, il y a personne qui est intéressé pour réaliser un flip book en html5?
Le code source est sous license GNU, et disponible à cette adresse, mais il est assez compliqué à comprendre!
Personne pour m'aider?

Olivier P

16 juin 2014 à 11:09:34

C'est en fait la question ?

Flip book HTML5

Flip book HTML5

Supprimer

Modérer

Signaler le message aux modérateurs