スライドショー２１-１面白２

現実の本をめくるようにページの端をマウスでドラッグすると、ページがめくれます。
画像も文章も載せられますが、原本をBing翻訳したせいで、本の中の日本語がおかしいです。
		このページの M寸原本画像右クリックで
book_M.png	paper_M.png	どうぞ
◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スライドショー２１-１面白２</title>


<!--★ここからコピー-->
<style type="text/css">
<!--
img {float: left; margin: 0px 20px 0px 0px;width:123px;height:81px;}

/*★main.cssを展開*/

body, h3, p{
	margin: 0;
	padding: 0;
}
body {background-color: #ffeeee;
 
color: #333333;
}


#book {
background: url("book_M.png") no-repeat;
position: absolute;
	
width: 830px;
  /*★原本830px。本の横幅*/	
height: 346px;  /*★原本260px。本の縦幅*/
	
left: 50%;
	/*★原本50%*/
top: 50%;	/*★原本50%
*/	
margin-left: -400px;
/*★原本-400px。-片ページ横幅*/	
margin-top: -168px;
/*★原本-125px。-片ページ縦幅の半分*/

}


#pages section {
 background: url("paper_M.png") no-repeat;
	
display: block;
	
width: 400px;  

/*★原本400px。片ページの横幅。(本の横幅マイナス30px)の半分*/	
height: 336px;  /*★原本250px。片ページの縦幅。本の縦幅マイナス10px*/

	
position: absolute;
	
left: 415px;
/*★原本415px。本の横幅の半分*/	
top: 5px;

/*★原本5px。マイナス10pxの半分*/	
overflow: hidden;
}
	
#pages section>div {
display: block;

width: 400px;  

/*★原本400px。片ページの横幅*/
		
height: 336px;
	/*★原本250px。片ページの縦幅。本の縦幅マイナス10px*/	
font-size: 12px;
	
}
	
#pages section p,
#pages section h3 {
padding: 10px 35px;
		
line-height: 1.4em;
		
text-align: justify;

font-size:110%;
}
	
#pages section h3{
margin: 15px 0 10px;
}


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

-->
</style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>
<br><br>
<p>現実の本をめくるようにページの端をマウスでドラッグすると、ページがめくれます。</p>
<hr>
<p>画像も文章も載せられますが、原本をBing翻訳したせいで、本の中の日本語がおかしいです。
</p>


<!--★コピーここから。位置は<body>の中です-->
<div id="book">
			
<canvas id="pageflip-canvas"></canvas>
			
<div id="pages">
				

<!--★<section>～
</section>で１ページ分になります。増減可能-->


<section>
					
<div>
						
<h3>History歴史</h3>
						
<p><img src="gy3.jpg">キャンバス当初アップルによって導入された Mac OS X WebKit コンポーネント内部で使用するダッシュ ボード ・ ウィジェットとサファリ ・ ブラウザーのようなアプリケーションに電力を供給します。後で、Gecko ブラウザーや Opera で採用され、次世代 web 技術の新しい提案する仕様の WHATWG によって標準化されています。<br>
■1/4■</p>
</div>
				
</section>
				


<section>
					
<div>
						
<h3>Usage使い方</h3>
						
<p><img src="gy4.jpg">キャンバスの高さと幅の属性を持つ HTML コードで定義されたドロウアブル領域から成っています。JavaScript コード描画関数と同様に動的に生成されたグラフィックを使用できるその他一般的な 2D Api の完全なセットを介して、エリアにアクセス可能性があります。いくつかの予想されるキャンバスの使用グラフ、アニメーション、ゲーム、建物を含めるし、画像の合成。<br>
■2/4■</p>
</div>
				
</section>
				


<section>
					
<div>
						
<h3>Reactions反応</h3>
						
<p><img src="gy5.jpg">Canvas 要素が web 標準化コミュニティから混合反応で満たされた導入の時に。サポートは、SVG 標準の代わりに新しい独自の要素を作成する Apple の決定に対する議論されています。懸念がある他の構文など、名前空間がない場合。<br>
■3/4■</p>
</div>
				
</section>
				


<section>
					
<div>
						
<h3>Supportサポート</h3>
						
<p><img src="gy6.jpg">要素は現在オペラとサファリ、グーグル ・ クロムメッキ Mozilla Firefox の最新バージョンでサポートされています。ネイティブ実装ではありませんインターネット エクスプ ローラー （IE） バージョン 8、サポートが Internet Explorer 9; 開発ただし、Canvas 要素の機能の多くをすることができますサポート IE では、たとえば Google または Mozilla のプラグイン、JavaScript ライブラリや Adobe Flash または IE のプロプライエタリな VML を使用します。<br>
■4/4■</p>
</div>
				
</section>
			


</div>
		
</div>
		

<script type="text/javascript">
<!--
/*===============================================================
http://www.html5rocks.com/ja/tutorials/casestudies/20things_pageflip/
===============================================================*/
/*★pageflip.jsの展開分*/

/*★本の大きさによって、cssと下記4行の数値を変更して下さい。*/

(function() {
	
	// Dimensions of the whole book
	
var BOOK_WIDTH = 830;
	
var BOOK_HEIGHT = 346;
	
	// Dimensions of one page in the book
	
var PAGE_WIDTH = 400;
	
var PAGE_HEIGHT = 336;
	
	// 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 = true;
			}
		}
		
	
// 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();
	}
	
})();



/*★pageflip.jsの展開分ここまで*/

-->
</script>
<!--★コピーここまで-->

</body>
</html>
スライドショー２１-１■面白２■ ドラッグでページめくりM寸 UP日時 : 2014/06/04

History歴史

Usage使い方

Reactions反応

Supportサポート

スライドショー２１-１■面白２■　ドラッグでページめくりM寸　　　　UP日時 : 2014/06/04
