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

現実の本をめくるようにページの端をマウスでドラッグすると、ページがめくれます。
こちらの原本サイトでダウンロードしたzipファイルの中のindex.htmlとmain.cssとpageflip.jsの3つのファイルを展開して合わせて、コピペで使用できるようにしました。
book.png
paper.png
このページの
S寸原本画像

右クリック
でどうぞ
◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』
<!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">
<!--
/*★main.cssを展開*/

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


body {
background-color: #444444;
 
color: #333333;
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;

/*★ -片ページ横幅。(本の横幅マイナス30px)の半分*/	
margin-top: -125px;/*★ -片ページ縦幅の半分。(本の縦幅マイナス10px)の半分*/

}




#pages section {
 background: url("paper.png") no-repeat;
	
display: block;
	
width: 400px;/*★片ページの横幅。(本の横幅マイナス30px)の半分*/	
height: 250px;/*★片ページの縦幅。本の縦幅マイナス10px*/
	
position: absolute;
	
left: 415px;

/*★本の横幅の半分*/
	
top: 5px;


/*★マイナス10pxの半分*/	
overflow: hidden;

}
	
#pages section>div {
display: block;

width: 400px;

/*★片ページの横幅。(本の横幅マイナス30px)の半分*/
		
height: 250px;/*★片ページの縦幅。本の縦幅マイナス10px*/
		
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;
}

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

</head>
<body>
<br><br>
<p style="color:#ffffff;">現実の本をめくるようにページの端をマウスでドラッグすると、ページがめくれます。</p>
<hr>
<p style="color:#ffffff;">こちらの<a href="http://www.html5rocks.com/ja/tutorials/casestudies/20things_pageflip/">原本サイト</a>でダウンロードしたzipファイルの中のindex.htmlとmain.cssとpageflip.jsの3つのファイルを展開して合わせて、コピペで使用できるようにしました。</p>


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

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

<section>
					
<div>
						
<h2>History</h2>
						
<p>Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and Opera and standardized by the WHATWG on new proposed specifications for next generation web technologies.</p>

</div>
				
</section>
				


<section>
					
<div>
						
<h2>Usage</h2>
						
<p>Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.</p>

</div>
				
</section>
				



<section>
					
<div>
						
<h2>Reactions</h2>
						
<p>At the time of its introduction the canvas element was met with mixed reactions from the web standards community. There have been arguments against Apple's decision to create a new proprietary element instead of supporting the SVG standard. There are other concerns about syntax e.g. the absence of a namespace.</p>

</div>
				
</section>
				


<section>
					
<div>
						
<h2>Support</h2>
						
<p>The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively implemented by Internet Explorer (IE) as of version 8, though support is in development for Internet Explorer 9; however, many of the Canvas element's features can be supported in IE, for example by using Google or Mozilla plugins, JavaScript libraries and either Adobe Flash or IE's proprietaryVML.</p>
</div>
				
</section>
			


</div>
		
</div>
		

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


(function() {
	
	// Dimensions of the whole book
	
var BOOK_WIDTH = 830;
	
var BOOK_HEIGHT = 260;
	
	// Dimensions of one page in the book
	
var PAGE_WIDTH = 400;
	
var PAGE_HEIGHT = 250;
	
	// 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>
スライドショー２１-２■面白２■ ドラッグでページめくりS寸 原本 UP日時 : 2014/06/04

History

Usage

Reactions

Support

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